Understanding Twitter Bootstrap Framework

Twitter Bootstrap is the most popular and powerful front end design (HTML, CSS, and JavaScript) framework for designing responsive, mobile friendly website. It is an open source and completely free to use framework. It is not a single tool rather a collection of tools for making websites and web applications.  It is a mixture of HTML, CSS, and JavaScript code created to help make user interface components for Typography, Buttons, Forms, Navigation menu, Alerts, Dropdowns, Modals, Carousel, Tabs, Accordion and other interface components. Since March 2015, it was the most rated project on GitHub, with more than 78,000 stars and over 30,000 forks.

Twitter Bootstrap (formerly named as Twitter Blueprint) was created by Mark Otto and Jacob Thornton at Twitter.

Why Use Bootstrap?

Save a lot of time: A lot of time and efforts can be saved with Bootstrap’s predefined design templates and classes. It helps you to focus on other development works.

Mobile first approach: Using Twitter Bootstrap’s responsive features you can easily create responsive website that works equally well in all the devices (starting from small Smartphone to large desktop)

Very Easy to use: Bootstrap is incredibly easy to use. Anyone with the basic understanding of HTML and CSS can start web development with Twitter Bootstrap.

Browser Support: Bootstrap is compatible with all the modern browsers including Google Chrome, Firefox, Internet Explorer, Opera Mini and Safari.

Open Source: Bootstrap is totally free as well as open source and available on GitHub. Interested Developers can participate in the project and make their own contributions to the framework.

Usage of Bootstrap:

It is really easy to setup and get started with Bootstrap. In this article, I will describe the download and setup process of Twitter Bootstrap. I will also explain the file structure of bootstrap, and illustrate its usage with an example.

Download Bootstrap: The first thing you have to do is downloading the newest version of Bootstrap from http://getbootstrap.com/. After going to this link you will see two buttons:

Download Bootstrap: Clicking on this button, you can get the precompiled and minimized versions of Bootstrap CSS, JavaScript, and fonts.

Download Source: By Clicking on this button, you can obtain the newest Bootstrap LESS and JavaScript source code from GitHub.

To understand well and simplicity of use, I will use the precompiled edition of Bootstrap throughout this article. As all the files are complied and minified you do not need to include separate files for individual functionality every-time. During writing this article the newest version (Bootstrap 3. 3. 4) was downloaded. After downloading the precompiled version of Bootstrap, extract the ZIP file, and notice the file structure. You will see a file structure like below:

file structure

Here you can see compiled CSS and JS files (bootstrap.css and bootstrap.js), as well as compiled and minified CSS and JS files (bootstrap.min.css and bootstrap.min.js) in css and js folder. You can also see Fonts from Glyphicons in the “fonts” folder. There are also some optional files for Bootstrap theme.

Including bootstrap in HTML: Here I have given an example that will help you to understand how to include bootstrap in your project.

<!DOCTYPE html>

<html>

<head>

<title>Usage of Bootstrap</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<link href=”css/bootstrap.min.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<h1> Bootstrap Learning </h1>

<script src=”https://code.jquery.com/jquery.js”></script>

<script src=”js/bootstrap.min.js”></script>

</body>

</html>

Note that, here we have included an extra file named jquery.js which is essential if you want to use the Bootstrap’s JavaScript functionalities

You must put the viewport meta tag in the <head> element, to make sure the responsiveness of your web site in all kind of mobile devices.

DavidWat