Bootstrap Grid System

In this section, we will explain Bootstrap's Grid System.

Bootstrap provides a responsive, mobile-first fluid grid system that automatically adapts to up to 12 columns as the screen or viewport size increases.

What is a Grid?

From Wikipedia:

>

Simply put, grids in web design are used to organize content, making websites easy to navigate and reducing the load on the user end.

What is Bootstrap's Grid System?

The description of the grid system from the official Bootstrap documentation:

>

Let's understand the above statement. Bootstrap 3 is mobile-first, meaning that Bootstrap code starts with small screen devices (like mobile phones, tablets) and then extends to larger screen devices (like laptops, desktops) for components and grids.

Mobile-First Strategy

• Content

• Decide what is most important.

• Layout

• Prioritize smaller widths.

• Basic CSS is mobile-first, with media queries targeting tablets and desktops.

• Progressive Enhancement

• Add elements as the screen size increases.

The responsive grid system automatically adapts to up to 12 columns as the screen or viewport size increases.

| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | | 4 | 4 | 4 | | 4 | 8 | | 6 | 6 | | 12 |

How Bootstrap's Grid System Works

The grid system creates page layouts through a series of rows and columns that hold content. Here's how Bootstrap's grid system works:

• Rows must be placed within a .container class for proper alignment and padding.

• Use rows to create horizontal groups of columns.

• Content should be placed within columns, and only columns can be immediate children of rows.

• Predefined grid classes, such as .row and .col-xs-4, can be used for quick grid layouts. LESS mixins can be used for more semantic layouts.

• Columns create gutters (gaps between column content) via padding. This padding is offset in rows for the first and last column via negative margin on .rows.

• The grid system is created by specifying the number of columns you want to span across the available twelve. For example, to create three equal columns, use three .col-xs-4.

Media Queries

Media queries are a neat "conditional CSS rule". They apply CSS based on certain conditions. If those conditions are met, the corresponding styles are applied.

Bootstrap's media queries allow you to move, show, and hide content based on viewport size. The following media queries are used in the LESS files to create the key breakpoint thresholds in Bootstrap's grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We sometimes also include max-width in our media queries to limit CSS to a smaller range of screen sizes.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Media queries have two parts: a device specification followed by a size rule. In the above cases, the following rules are set:

Let's look at this line of code:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

For all devices with min-width: @screen-sm-min, if the screen width is less than @screen-sm-max, some processing will be done.

Grid Options

The following table summarizes how the Bootstrap grid system works across multiple devices:

Grid System for Different Devices

Basic Grid Structure

Below is the basic structure of the Bootstrap grid:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Let's look at a few simple grid examples:

-**

-**

-**

Responsive Column Resets

The following example includes four grids, but we are unable to determine the display position of the grids when viewed on small devices.

To solve this issue, you can use the .clearfix class and responsive utilities as shown in the following example:

Example

<div class="container">
    <div class="row" >
        &lt;div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        &lt;div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
            </p>
        </div>

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

        &lt;div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;

<div class="container">
    <div class="row">
        &lt;div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        &lt;div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
            </p>
        </div>
    </div>
</div>

Resize the browser window to see the effect, or view it on your mobile device.

Offset Columns

Offset is a useful feature for more specialized layouts. They can be used to make more space between columns. For example, .col-xs-* classes do not support offsets, but they can be achieved by using an empty cell.

To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left margin of a column by * columns, where * ranges from 1 to 11.

In the following example, we have <div class="col-md-6">..</div>, and we will center this div using the .col-md-offset-3 class.

Example

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        &lt;div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>

The result is as shown below:

Nested Columns

To nest the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

In the following example, the layout has two columns, with the second column being split into two rows of four boxes each.

Example

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>First Column</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>Second Column - Split into 4 boxes</h4>
            <div class="row">

<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
    <p>
        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
    </p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
    <p>
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</div>
</div>
<div class="row">
    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <p>
            quis nostrud exercitation ullamco laboris nisi ut 
            aliquip ex ea commodo consequat.
        </p>
    </div>
    <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. Ut enim ad minim.
        </p>
    </div>
</div>
</div>
</div>
</div>

The result is as shown below:

Column Sorting

Another great feature of the Bootstrap grid system is that you can easily write columns in one order and display them in another order.

You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* classes, where * ranges from 1 to 11.

In the following example, we have a two-column layout with a narrow left column acting as a sidebar. We will use .col-md-push-* and .col-md-pull-* classes to swap the order of these two columns.

Example

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            Before sorting
        </p>

<div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I am on the left
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I am on the right
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            After sorting
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I am on the left
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         I am on the right
        </div>
    </div>
</div>

Result as shown below: