Bootstrap: A tool for Web Designers and Developers to build amazing responsive websites
Hello and welcome again, Enjoying articles on web designing? In previous article I had explained tips to design effective landing page for business. Today I am going to explain about “Bootstrap” A tool for web designers and developers to build amazing responsive website. Bootstrap was founded in mid-2010 by some developers of twitter. It’s responsive design framework that designers and developers are using to build either static and dynamic websites or web applications. Bootstrap got really nice popularity in Github and its really helpful tool for Web Designers and developers to build amazing responsive websites in very less time or we can say in no time. Bootstrap is compatible with the latest versions of the Google Chrome, Firefox, Internet Explorer, Opera, and Safari browsers, although some of these browsers are not supported on all platforms. Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default. Bootstrap provides a set of style sheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements. Its classes and module based framework, it will be very useful to designers and developers as they can easily code less using different standard modern designs. Also it has its built-in jQuery support on it has a lot of popular elements driven by JavaScript such as carousel, gallery and so on. Simply just put the right classes on your html code and you’re ready to rock with design. In this tutorial, we’re going to look at in-depth tutorial on how to work with Bootstrap and how customize it for your websites or web applications. 
Downloading and Installing Bootstrap To start you need to download bootstrap.zip from the official website of Bootstrap. But before we are going to start, it is worth talking about customization feature that we can do on our bootstrap package. To start this just click the “Customize” button on the top navigation of the Bootstrap’s website. From that you can customize what you want to include on you bootstrap package. For now, we have the Bootstrap version 3.3.2. Folder structure of bootstrap 
Now, open your downloaded bootstrap package, you will see that there are three folders inside that main downloaded folder.
- CSS folder
- Fonts folder
- JS folder
Now, all folders have some relevant files which are given below.
- CSS folder – contains six files namely:
- css – this bootstrap CSS file contains the extra spaces to make it more readable and is a bit bigger in size compared with minified version
- min – this bootstrap CSS file has been minified and all of the extra spaces were removed to make the file size a bit smaller
- bootstrap-theme.css – this CSS file contains extended styles such as 3D buttons, gradients and so on. Similar with the regular bootstrap.css file this is the larger file version of this file.
- bootstrap-theme.min.css – this is the minified version of the bootstrap-theme.css file.
- css.map and bootstrap-theme.css.map – these are source maps generated by LESS. The main purpose of these map files is used to link the CSS source code to LESS source code in developer’s tool such as those in Firefox and Chrome.
- Fonts folder – this folder contains 4 format of fonts to support the glyphicons fonts that are available inside boostrap.
- js folder – this folder contains the minified and the regular bootstrap JavaScript file version.
The HTML Markup Before we start working with bootstrap, we need to set up first our HTML code and link it our CSS and JavaScript files. Below are the starting markups. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Grid Demo with Bootstrap</title> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> <body> </body> </html>
Column Grid System with Bootstrap
Bootstrap covers all devices, so you are free from manage columns by devices. It comes with four grid sizes that breakdown each sizes.
- Extra small devices (col-xs) – for Phones with less than 768px viewport
- Small devices (col-sm) – for Tablets with greater than or equal to 768px viewport
- Medium devices (col-md) – for Desktops with greater than or equal to 992px viewport
- Large devices (col-lg) – for Desktops with greater than or equal to 1200px viewport
Adjusting Column width using offset columns
The next feature of bootstrap is offset – where we can set up spaces between columns. If we have small devices like iPhone or android phone there may be columns will be small. So this feature will manage spaces between that columns for all devices. To create space we have to use offset class along with our grid classes like: col-gridsize-offset-number-of-columns. Now to apply this on our small devices with media screen.
Nested columns
With help of bootstrap we are able to create nesting of rows. These means we can add row within a row and we can set some grid based sizes on that row. Good thing is you can define that rows on 12 columns. So, that all are features are important to make responsive size, and based on that all features – web designer and developer can easily make responsive website in very less time.