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:
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:
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.
<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”>
<h1> Bootstrap Learning </h1>
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.