BootStrap Overview

Bootstrap is one of the popular CSS Frameworks developed by Twitter. It was formerly known as Twitter Bootstrap. One of the main features of Bootstrap is the ability to create responsive websites very quickly. It has got a huge collection of templates which one could use for web designing. You also have templates for different parts of a web page like Navigation Bars, Forms, Side Panels etc.

People trying to use Bootstrap for the first time would find things a little weird. It takes some time in understanding the framework as it normally does for any other framework. Bootstrap follows a grid based layout where everything is in terms of rows and columns. Just like New York City, where the whole city is divided into Streets and Avenues  🙂 . It might seem confusing in the beginning but it won’t take too much time to get used to it. The grid based layout is a more organised way of representing data.

The grid in Bootstrap basically contains 12 columns. And the whole Idea while developing or designing a page is how many columns should each component in a web page take. Everything is designed with respect to that measure. And in addition to specifying the number of columns the next thing is to specify the screen size or the screen width. Everything is represented in pixels (px).  They are basically of four types-

  1. Extra Small Devices-Phones (<768 px)
  2. Small Devices-Tablets(>=768 px)
  3. Medium Devices-Desktops (>=992 px)
  4. Large Devices-Desktops(>=1200 px)

We normally use the class prefix to represent the different device types.

Extra Small .col-xs-

Small  .col-sm-

Medium .col-md-

Large .col-lg-

Another thing to remember is the approximate column width which each device would have. This is useful while estimating the number of columns a component in a web page would take.

Small Devices – 62px

Medium Devices – 81px

Large Devices – 97px

For some reason Bootstrap does not give an approximation for extra small device.  Well ,hopefully you have now  got a broad understanding of the Bootstrap framework 🙂 .

 

To read more about bootstrap jump on this link http://getbootstrap.com/

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s