Getting Started With Bootstrap

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.

Getting Started With Bootstrap

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.

Related:  How Indian Publishers Can Add Wire Transfer Payment in Google AdSense?

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.

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

Initial Release – Version 119 Aug 2011Open source
Version 231 Jan 2012Major update with 12 columns grid layout and Glyphicons.
Version 319 Aug 2013Flat design and mobile first approach.
Version 4 – Alpha19 Aug 2015Major update in CSS classes, use of Sass and removing Glyphicons.
Version 4 – Beta10 Aug 2017Additional contextual colors classes, tether.js dropped and popper.js added.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

General Usage

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.

End users can directly download the precompiled CSS / JS files and use it on your site. Download version 3.3.7 here, V4 alpha version here and V4 beta version here.

Related:  7 Bidding Options for Advertisers

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 herehere 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.

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 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.

Recommended Articles:

Leave a Comment