A decade back, having a website was a dream and possible only for the tech geeks. Nowadays every common man can start a site or blog thanks to the popularity of free site builder tools and UI frameworks. As site building industry is very competitive in nature, each company needs to focus on offering better than other’s to attract end users. Bootstrap is one of the popular framework and we will explain how can you start learning Bootstrap for building your websites.
Tools for Website Building
There are three kind of tools for users and developers to getting started with their website:
- Self-hosted open source content management systems like WordPress.org, Drupal and Joomla.
- Free hosted platforms like WordPress.com, Weebly and Wix.
- Independent user interface (UI) frameworks like Bootstrap and Google Material Design.
The scope of self-hosted platforms is vast and not suitable for most of the end users having no time to invest. Free hosted platforms are easy to use but have heavy dependencies which will restrict your capabilities only to that platform. The last option is to have a mix of self-hosting, development and the freedom to reuse frontend element blocks. In this article, let us explore more on how to get started with Bootstrap frontend framework.
What is Bootstrap?
Bootstrap is one of the popular user interface framework available at this point of time. This is a frontend framework created with HTML, CSS and JavaScript without the involvement of server side scripts like PHP. It was initially developed by Twitter with the name “Twitter Blueprint” to improve consistent visibility across multiple devices and tools. Later it was renamed as Bootstrap and released as an open source project during August 2011.
Bootstrap is one of the popular projects available on GitHub with 100k+ stars. The latest information on Bootstrap releases and updates is available on the official website getbootstrap.com. The popularity of Bootstrap is increased over the period of time with the mobile first approach and the easy conversion of Bootstrap themes to popular content management themes like WordPress. There are also popular Bootstrap site builders like Mobirise to kick-start your website without coding skills.
Bootstrap Versions
Below table shows the version update of Bootstrap, it is at V4 alpha 6 when this article was written.
| Version | Date | Major Changes |
|---|---|---|
| Version 1 | 19 Aug 2011 | Open source |
| Version 2 | 31 Jan 2012 | Major update with 12 columns grid layout and Glyphicons. |
| Version 3 | 19 Aug 2013 | Flat design and mobile first approach. |
| Version 4 | 19 Aug 2015 | Major update in CSS classes, use of Sass and removing Glyphicons, tether.js dropped and popper.js added. |
| Version 5 | 05 May 2021 | Free from jQuery, Bootstrap icons, new logo and RTL support. |
General Usage
At this moment the stable version is Bootstrap 5.01 and the you have to migrate to the latest version if you are using earlier versions 3 or 4. So if you are developing a site to be published soon ideally you should use version 5.01 which is stable. End users can directly download the precompiled CSS / JS files and use it on your site. Download version 3.4.1 here, V4.6 here and V5.01 here. If you are developing projects for clients or yourselves then you can download the complete source code with Sass files from GitHub.
Note: Installing Bootstrap on your Windows based PC or macOS is a complicated task as it has lot of dependencies. In short you should have Node.js and NPM installed on your computer along with Grunt for compiling. Further you can use Harp.js for generating static site files using partials or includes.
License
The Bootstrap files are distributed under MIT license with a single requirement as the copyright information should be retained in all Bootstrap source files.
Keep the license and copyright notice included in Bootstrap’s CSS and JavaScript files when you use them in your works.
You can view the entire license in GitHub.
Starting Your Site
You have two ways to start building your site with Bootstrap. One is to download and host CSS and JS files on your hosting server and the other is to use CDN links. We recommend to build a starter template and then start using all Bootstrap components inside a starter template. You can get more details on the Bootstrap 5 starter template section.
Below are the CDN links for using on your site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>Ensure to use Popper and then Bootstrap JS file in sequence, otherwise you can use single bundled script file that includes Popper script. Similarly add any custom CSS stylesheets after the Bootstrap CSS, so that it will not take precedence over the framework definitions. Bootstrap 5 uses border-box for box-sizing property which may affect the layouts. You can change this to content-box if needed only for the particular elements by declaring inline CSS.
Leave a Reply
Your email is safe with us.