Bootstrap is front-end web development tools made of CSS mixed with some JavaScript to help make web sites more responsive in terms of various screen sizes. Also put to use are @media queries and utility classes. It was created by two web developers at Twitter to facilitate web design so that there is less styling required for responsive web design.

It takes a bit to get your head around, but if used properly, can ease the need for extensive styling fixes for smaller devices.

Note: The styling for the pages can certainly be modified, but the web developer must work within the basic parameters of the template, media queries and utlitiy classes in order for the site to function properly.

Bootstrap is free and the files can be obtained from twitter.github.io/bootstrap/index.html. Complete explanation fo the Bootstrap system is available on this site as well.

Default Grid System

Bootstrap layout is a default grid system utilizing 12 columns. When utilizing the responsive CSS files, this grid system will adapt to widths of 724px and larger.  Below 724px the columns will stack vertically in a fluid manner.  These grids can be combined to create any number of columns.  With the Default grid system. the columns stay a certain width until the point at which they stack.

The grids can be combined into divs using .row classes and .span classes ranging from .span1 to .span12. The .row divs are the containers for the .span divs.  Within the .row you can have one or more .span classes - but they must add up to 12.  The columns may also be nested with the sub-columns adding up to the number of the parent column.  The columns may also be offset with adding classes of .offset1, .offset2, etc. The offsetting increases the left margin by a number of grids specified by the number following offset.

For example:

<div class="row">
    <div class="span4"></div>
    <div class="span8">
        <div class="row">
             <div class="span4"></div>
             <div class="span4"></div>
       </div>
</div>

In this example The .span4 div is 4 grids wide and the .span8 div is 8 grids wide.

Fluid Grid System

With Bootstrap, the fluid grid system uses percentages rather than pixels for column widths. So as the window is reduced in size, the columns reduce proportionately IF you set the outside container to be a percentage of the browser size. This is tricky, because then the amount of space for your content is reduced continuously. Your images also need to be set to be a percentage. Once the browser window reaches a certain width, the columns are all set to 100% and stack vertically.

The grids can be combined into divs using .row-fluid classes and .span classes ranging from .span1 to .span12. The .row-fluid divs are the containers for the .span divs.  Within the .row you can have one or more .span classes - but they must add up to 12.  The fluid columns may also be nested with the sub-columns adding up to 12 as well.  

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8">
        <div class="row-fluid">
             <div class="span4"></div>
             <div class="span4"></div>
             <div class="span4"></div>

       </div>
</div>

Fixed Layout

To use the fixed layout options, place all of the divs within
<div class="container">

Fluid Layout

To use the fixed layout options, place all of the divs within
<div class="container-fluid">

Responsive Design

To utilize the responsive design you must include tow <meta> tags within the <head> section of your web page.

<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkhref="assets/css/bootstrap-responsive.css" rel="stylesheet">