Development of Responsive Websites: Part 1

All about Grid in Twitter Bootstrap

1. Responsive Websites

Responsive Web Design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.

2. Twitter Bootstrap

Twitter Bootstrap is a front-end framework to develop web apps and websites that are fast and responsive. Bootstrap provides basic modules, like a Grid, typography, Navigation, Tables, forms, buttons and so on. This entire framework is a module-based framework. The developer can customize their own CSS also. A basic knowledge of HTML, CSS and JavaScript are sufficient to work on Bootstrap.

3. Download Bootstrap

The developer downloads Bootstrap from the following links:

http://getbootstrap.com/
https://github.com/twbs/bootstrap/archive/v3.0.0.zip#sthash.FgXMbegP.dpuf

4. After downloading

After downloading and unzipping the Bootstrap folder, you get the following three folders:

• CSS: This folder contains the CSS files.

• JavaScript: This folder contains all JavaScript files.

• Img: This folder contains the glyphicons images.

5. Basic HTML Template

We are already aware of the basic HTML Template.

Figure 1: Basic HTML Page and its Structure

6. Adding Bootstrap

Simply drag the Bootstrap folder directly to your web application or Website in Solution Explorer. It will then look like this:



Figure 2: After adding Bootstrap folder

7. Include the Link to the CSS Stylesheet and the JavaScript

With Bootstrap, we include the link to the CSS stylesheet and the JavaScript.



Figure 3

8. Grid System in Bootstrap

The default Grid system uses 12 columns, making for a 940 px-wide container without any responsive features enabled. With the responsive CSS files added, the grid adapts 742px or 1170px wide, depending on your viewport. Below 767px viewports, such as the ones on tablets and smaller devices, the columns become fluid and stack vertically. At the default width, each column is 60 pixels wide and offset 20 pixels to the left.



Figure 4

9. Basic Grid System

To create a simple Grid layout, create a container with a <div> that has a class row and add a class span for columns. For instance, for creating 12 columns we use span 1 twelve times. See the the following code.

<div class=" container well">
  <div class="row">

      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>
      <div class="span1" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span1</div>

  </div> <br />

    <div class="row">

        <div class="span8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span8</div>
        <div class="span4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span4</div>
    </div>

    <br />

    <div class="row">

        <div class="span4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span4</div>
        <div class="span4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span4</div>
        <div class="span4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span4</div>
    </div>

    <br />
    <div class="row">
        <div class="span6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span6</div>
        <div class="span6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">Span6</div>


    </div>
        </div>

This piece of code provides the structure of the grid like this:



Figure 5

10. Offsetting Columns

By using the offset class you can move columns to the right. Each class moves the span over that width.



This piece of code gives output like:



Figure 6

11. Nesting Columns

To nest your content with the default grid, inside of a .span*, simply add a new row with enough span* that it equals the number of spans of the parent container.



The result of this code is:



Figure 7

12. Fluid Grid Systems

This system uses a percentage instead of pixels for column widths. The developer simply uses the class row-fluid for this.



The following is the result of this code: