Twitter Bootstrap: A Basic Overview of the Layout and CSS Classes

bootstrap gridTwitter bootstrap is a front-end framework, which provides all the functional modules required to build web applications quickly and easily. This article will be looking at the grid system module, what it is, and how it can help create consistency across the pages in a web application.

New to Twitter Bootstrap? Take a course at Udemy.com.

A grid system is a two dimensions structure made up of columns and intersecting rows that allow graphic designers to accurately position layout of objects. In website design, a grid system is constructed using HTML and CSS in order to create a matrix of rows and columns where the designer can accurately position the content into specific columns in a predictable and uniformed fashion across many views.

Twitter Bootstrap from version 2.2.3 onwards offers two version of Grid system. The default grid is 940 pixels wide and is constructed using 12 columns. There is also the fluid grid system, which is percentage rather than pixel based. Both systems can be made responsive by the application of the responsive style sheet, which will be discussed later.

Bootstrap uses classes to create rows and columns in CSS, for example in the base HTML code snippet below. In the example, rows are defined by the class row whilst the columns are defined by the class span4. The 4 designates the width of the column, and as the entire width is equal to 12 columns, a span4 gives only 12/4 = 3 columns.

<body>

<div class="container">

<div class="row">

<div class="span4"><p>.</p></div>

<div class="span4"><p>.</p></div>

<div class="span4"><p>.</p></div>

</div>

</div>

 

In the next example, the class is span2, which allows for 12/2= 6 columns. Therefore, by defining the column width, the design can be determined into a predetermined number of identical columns. Remember that columns hold the content.

 

<body>

<div class="container">

<div class="row">

<div class="span2"><p>.</p></div>

<div class="span2"><p>.</p></div>

<div class="span2"><p>.</p></div>

<div class="span2"><p>.</p></div>

<div class="span2"><p>.</p></div>

<div class="span2"><p>.</p></div>

</div>

</div>

 

In the first example, a 3 column structure is designed using CSS class=span4 with a single container to hold the entire structure. In the second example, CSS class= span2, is used to deliver a 6-column design. Therefore, we can state that the base syntax for designing a fixed grid is as follows:

 

<div class="row">

<div class="spanx"> where Y is equal to the number of rows required and the sum of x equals 12

</div>

repeat <div class="spanx"> y times

Columns can be of different widths. For example, a 3-column model may be laid out as span4, span4, span4 to give three equal sized columns, or it could be span6, span3, span3 to give one wide and then two thinner columns.

 

Creating Column in a Fixed Grid

 

Separate CSS rules are used to select the width of a column. An example is shown below:

 

.span12 { width: 940px;   This equates to a single column of 940px width

 

.span11 { width: 860px  This equates to a column of width 12/11 or 860px width

 

 

.span10 { width: 780px  This equates to a column of width 12/10 or 780px width

.

.

.

.span2 { width: 140px  This equates to a column having the width of 12/2 or 140px width

 

Using the Default Grid

In practice, the default grid would be configured with different sizes of columns to contain different type and size of content. The following is an example of how to configure columns of different sizes within the same container:

<body>

<div class="container">

<div class="row">

<div class="span12">

<h1>creates one column 940px</h1>

</div>

</div>

<div class="row">

<div class="span3">

<p>< />creates one column 12/3 wide 220px</p>

</div>

<div class="span9">

<p>creates the other 12/9 column 700px</p>

</div>

</div>

 

This is what the columns would look like:

 

One long column full screen width and 940 px
One narrow 220pxOne long 700px
220px220px220px220px

 

Nesting Columns in a Default Grid

Columns can be nested within other columns as long as they do not exceed the number of columns of the parent. For example, to create a nested column, simply add a row within a column, like below.

<body>

<div class="container">

<div class="row">

<div class="span7">

<div class="row">

<div class="span4">

<p>this is the first child column</p>

</div>

<div class="span3">

<p>This is the second child column</p>

</div>
</div>

</div>

<div class="span5">

<p> </p>

</div>

</div>

</div>

In the nested example above, there are two columns defined by a class named span7 and a class named span5 that matches 12 columns. Within this class span, another two columns have been created — class span4 and class span3, (4+3)=7 which is the size of the parent.

Take a class at Udemy.com and learn how to work with Bootstrap.

Twitter Bootstrap 3.0

There have been major changes in the grid system in Twitter Bootstrap 3.0. the Bootstrap v2.3.2 grid system was fixed in version 3.0. The new system is a responsive mobile first fluid grid system that scales up to 12 columns to accommodate the size of the screen.

The new version has predefined grid classes for quickly making appropriate grid sizes for different types of devices.

 

Features
Bootstrap 3 Grid System
Extra small devices
Phones (<768px) Class   .col-xs-
Small devices
Tablets (≥768px)  Class   .col.sm-
Medium devices
Desktops (≥992px) Class   .col-md-
Large devices
Desktops (≥1200px) Class   .col-lg-

 

These predefined classes are identified by the appropriate class prefix. For example, mobile phones have class .col-xs- (extra small), tablets are assigned class .col-sm- (small), PCs with standard size monitors are assigned .col-md- and display equal to 768px or more.

An example of the responsive version 3.0 grid is shown below for a PC or laptop with a screen size between 768 and 980 using class col-md-4.

The 4 signifies the width as with the earlier version so 12/4=3 gives 3 columns

 

<div class="container">

<div class="row">

<div class="col-md-4"><p>Box 1</p></div>

<div class="col-md-4"><p>Box 2</p></div>

<div class="col-md-4"><p>Box 3</p></div>

<div class="clearfix visible-md"></div>

<div class="col-md-4"><p>Box 4</p></div>

<div class="col-md-4"><p>Box 5</p></div>

<div class="col-md-4"><p>Box 6</p></div>

 

The line <div class=”clearfix visible-md”></div> is there to separate groups of 12 columns to prevent possible alignment problems.

When deciding which class to use, developers pick their target device first, i.e. a tablet and code the class for it specifically. Then, they will accommodate other devices by adding responsive classes.

<div class="container">

<div class="row">

<div class="col-sm-6 col-md-4"><p>Box 1</p></div>

<div class="col-sm-6 col-md-4"><p>Box 2</p></div>

<div class="clearfix visible-sm"></div>

<div class="col-sm-6 col-md-4"><p>Box 3</p></div>

<div class="clearfix visible-md"></div>

<div class="col-sm-6 col-md-4"><p>Box 4</p></div>

<div class="clearfix visible-sm"></div>

In the example above, responsive classes for small devices are added and “clearfix” applied after 12 columns are reached.

There are two other preconfigured classes available:

Visible-xs

Visible-sm

Visible-md

Visible-xl

These classes determine hidden and visible elements.

Hidden-xs

Hidden-sm

Hidden-md

Hidden-lg

Learn more about Bootstrap by taking a class at Udemy.com.