With more and more companies trying to establish their presence over the internet the importance of having a proper website has gone up significantly. Responsive web design promotes an idea when it comes to enhancing the viewing experience of a website. This necessarily means that whether you are viewing it on your desktop or over a phone, there is no chance that the website will become distorted. So the basic idea behind this concept is – one design to rule them all. Responsive design depends hugely on CSS3 media queries that target specific screen resolutions and sizes.

The concept of Twitter Bootstrap was the same – to encourage consistency across internet tools. It was initially developed by Mark Otto and Jacob Thornton to remove the problems of inconsistencies and high maintenance burden coming out of various libraries that were used for interface development.

While using Twitter bootstrap for responsive web design you must add the viewport meta tag, as it is commonly called, within the head section of the page. The width property sets the width of the screen. It has the ability to contain values like 320, denoting 320 pixels or they might even have the value ‘device width’ which tells the browser to use the native resolution or device.  The initial-scale property in the head section of the viewport is used as a multiplier. So when it is set to 1.0 it represents the native width of the device in question.

What’s inside?

While you take a closer look at the Bootstrap you can notice that the development files have been separated into seven distinct files:

• A CSS reset developed and modified to remove unnecessary elements
• Preboot less colour variables and mix ins for adding gradients, transparencies and transitions to enhance the prefixed CSS blocks for user simplicity

After the initial stage you must add the responsive CSS of the Twitter bootstrap. In the CSS file after declaring some general stuff from line 10 to 22 there are various sections starting with @media.

The first of this section starts with @media (max-width: 480px) which sets style for devices whose maximum width is 480 pixels. The second section starts with @media (max-width: 767px) which again sets styles for devices whose maximum width is 767 pixels. The third section has a width limit within 768 px and 979px which sets styles for devices whose maximum width ranges between 768 and 979px. There are three more sections with the width of the first section being 979px and the last two sections ranging between 980 and 1200px.

The purpose served is the purpose gained

Twitter Bootstrap basically serves three purposes.

1. Modifying the width of the  column grid
2. It uses stack element instead of floats when required (the root element [html] forms the root stacking context.
3. To render headings and text properly; if required, it resizes them as and when required

At the end thus it can be said that Twitter Bootstrap has emerged to become one of the major technological breakthroughs. As Twitter chooses to increase the breadth, it covers a predefined set in order to become the next big thing.

Calvin is the author of this guest post. He is a professional web designer and provides tips for the same through his articles. He is also working with the team providing web design in Sussex and helps come up with new ways of creating attractive web pages.