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. 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?
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.
Below table shows the version update of Bootstrap, it is at V4 alpha 6 when this article was written.
|Initial Release – 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 – Alpha||19 Aug 2015||Major update in CSS classes, use of Sass and removing Glyphicons.|
|Version 4 – Beta||10 Aug 2017||Additional contextual colors classes, tether.js dropped and popper.js added.|
At this moment the stable version is Bootstrap 3.3.7 and the version 4.o is at beta release which is not stable. So if you are developing a site to be published soon ideally you should use version 3.3.7. But the official Bootstrap site is already changed to V 4.0 beta and hence you can assume there will not be much changes in the final version 4.0.
If you are developing projects for clients or yourselves then download the complete source code with Sass files. Version 3.3.7, V4 alpha 6 and V4 beta can be downloaded here, here and here respectively.
Installing Bootstrap on your Windows based on PC or Mac OS X 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.
The Bootstrap files are distributed under MIT license with a single requirement as the copyright information should be retained in all Bootstrap source files.
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 4 starter template section.
Below are the CDN links for using on your site:
<!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <!-- Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Ensure to use jQuery, Popper and then Bootstrap JS file in sequence. Similarly add any custom CSS stylesheets after the Bootstrap CSS.