Microsoft Dot Net Master: Bootstrap Grid System

The Bootstrap grid system is the fastest and easy way to create a layout.

What is Bootstrap Grid System

The Bootstrap grid system provides the quick and easy way to create the layouts of the web pages. As opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens. The following table summarizes some of the key features of the new grid system

Features Bootstrap 3 Grid System	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Max container width	None (auto)	`750px`	`970px`	`1170px`
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Max column width	`Auto`	`~62px`	`~81px`	`~97px`
Gutter width	`15px` on each side of a column (i.e. `30px`)

Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present.

Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the class.col-xs-*, .col-sm-*, .col-md-* and .col-lg-*. The columns are actual content area where we will place our contents. Let's put all these things into real action.

Creating Two Column Layouts

The following example will show you how to create two column layouts for small, medium and large devices like tables, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal as default.

Example

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

        <div class="col-sm-6"><!--Column left--></div>

        <div class="col-sm-6"><!--Column right--></div>

```
    </div>
```
```
    
```

    <!--Row with two columns divided in 1:2 ratio-->

```
    <div class="row">
```

        <div class="col-sm-4"><!--Column left--></div>

        <div class="col-sm-8"><!--Column right--></div>

```
    </div>
```
```
    
```

    <!--Row with two columns divided in 1:3 ratio-->

```
    <div class="row">
```

        <div class="col-sm-3"><!--Column left--></div>

        <div class="col-sm-9"><!--Column right--></div>

```
    </div>
```
```
</div>
```

Since Bootstrap grid system is based on 12 columns, so to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers in each row should be equal to 12. If you see the above example carefully you will find the numbers of grid columns (i.e. col-sm-*) add up to twelve (6+6, 4+8 and 3+9) for every row.

Creating Three Column Layouts

Similarly, you can create other layouts based on the above principle. The following example will typically create three column layouts for laptops and desktops screens. It also works in tablets in landscape mode if screen resolution is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode it will be horizontal as usual.

Example

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

        <div class="col-md-4"><!--Column left--></div>

        <div class="col-md-4"><!--Column middle--></div>

        <div class="col-md-4"><!--Column right--></div>

```
    </div>
```
```
    
```

    <!--Row with three columns divided in 1:4:1 ratio-->

```
    <div class="row">
```

        <div class="col-md-2"><!--Column left--></div>

        <div class="col-md-8"><!--Column middle--></div>

        <div class="col-md-2"><!--Column right--></div>

```
    </div>
```
```
    
```

    <!--Row with three columns divided unevenly-->

```
    <div class="row">
```

        <div class="col-md-3"><!--Column left--></div>

        <div class="col-md-7"><!--Column middle--></div>

        <div class="col-md-2"><!--Column right--></div>

```
    </div>
```
```
</div>
```

Note:If more than 12 grid columns are placed within a single row, then each group of extra columns, as a whole, will wrap onto a new line.

Bootstrap Layouts with Column Wrapping Feature

Now we are going to create more flexible layouts that changes the column orientation based on the viewport size. The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode, but on small devices like tablets in portrait mode, it will change into a two column layout where the third column moves at the bottom of the first two columns.

Example

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

        <div class="col-sm-3 col-md-2"><!--Column one--></div>

        <div class="col-sm-9 col-md-8"><!--Column two--></div>

        <div class="col-sm-12 col-md-2"><!--Column three--></div>

```
    </div>
```
```
</div>
```

As you can see in the example above the sum of small grid column numbers (i.e. col-sm-*) is 3 + 9 + 12 = 24 > 12, so the third <div> element with the class .col-sm-12 that is adding the extra columns beyond the maximum 12 columns in a .row, gets wrapped onto a new line as one contiguous unit on small devices having the viewport width less than the 992 pixels.

Similarly, you can create even more adaptable layouts for your websites and applications using the Bootstrap's grid column wrapping feature. In the next section, we'll discuss the other aspect of this feature. Here're some ready to use Bootstrap grid examples.

Creating Multi-Column Layouts with Bootstrap 3 Grid System

With the new Bootstrap 3 mobile first grid system you can easily control how your website layout will render on different types of devices that have different screen sizes like cell phones, tablets, desktops, etc. Let's consider the following illustration.

In the above illustration there are total 12 content boxes in all devices, but its placement varies according to the device screen size, like in mobile device the layout is rendered as one column grid layout which has 1 column and 12 rows placed above one another, whereas in tablet it is rendered as two column grid layout which has 2 columns and 6 rows. Further, in medium screen size devices like laptops and desktops it is rendered as three column grid layout which as 3 columns and 4 rows and finally in large screen devices like large desktops it is rendered as four column grid layout which has 4 columns and 3 rows.

Now the question is how we can create such responsive layouts using this Bootstrap new mobile first grid system. Let's start with the medium device that can be a laptop or normal desktop. Since our medium device layout has 3 columns and 4 rows i.e. 3x4 grid layout, so the HTML code for making such grid structure would be something like this.

Example

```
<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="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>

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

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

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

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

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

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

```
    </div>
```
```
</div>
```

If you see the output of the above example in a laptop or desktop having screen or viewport width greater than or equal to 992px and less than 1200px you will find it has 4 rows where each row has 3 equal columns resulting in 3x4 grid layout.

But just wait, the above example has a major alignment issue. If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.

Example

```
<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-block"></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>

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

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

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

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

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

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

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

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

```
    </div>
```
```
</div>
```

Since the default gird system has 12 columns and in our layout sum of the every three column number, i.e. col-md-* is equal to 12 that's why we cleared columns after every third occurrence. In any other scenario where columns numbers are different for every column you should use .clearfix after the column that makes the complete 12 column grid.

Note:The responsive utility class .visible-md-block makes the .clearfix class effective only on medium size devices and it is hidden on other devices.

Now it's time to customize our layout for other devices. First customize it for tablet. Since inside the tablet our layout rendered as 2x6 grids (i.e. 2 columns and 6 rows). So, go ahead and add the class .col-sm-6 on every column.

Example

```
<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="col-sm-6 col-md-4"><p>Box 3</p></div>

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

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

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

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

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

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

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

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

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

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

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

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

```
    </div>
```
```
</div>
```

Now, since the sum of every two column number, i.e. col-sm-* is equal to 12, so clear floats after every second occurrence of columns.

After clearing floats for small devices our final code would be:

Example

```
<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-block"></div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```
    </div>
```
```
</div>
```

Tip:For convenience choose your primary target device and create layout for that device first after that add classes to make it responsive for other devices.

Similarly, you can customize the layout for larger devices like a large desktop screen. Here's the final code after combining the whole process.

Example

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

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

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

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

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

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

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

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

        <div class="clearfix visible-lg-block"></div>

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

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

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

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

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

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

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

        <div class="clearfix visible-lg-block"></div>

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

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

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

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

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

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

```
    </div>
```
```
</div>
```

Tip:According to the above illustration there is no need to customize the layout for extra small devices like mobile phones; since columns on extra small devices are always horizontal and rendered as one column grid layout by default.

Offsetting the Grid Columns

You can also move grid columns to the right for alignment purpose using the column offset classes like .col-md-offset-*, .col-sm-offset-*, etc.

These classes offset the columns by simply increasing its left margin by specified number of columns. For example, the class .col-sm-offset-4 on the column .col-sm-8 moves it to the right over four columns from its original position.

Example

```
<div class="container">
```
```
    <div class="row">
```
```
        <div class="col-sm-4"></div>
```
```
        <div class="col-sm-8"></div>
```
```
    </div>
```
```
    <div class="row">        
```

        <div class="col-sm-8 col-sm-offset-4"><!--Column with 4 columns offset--></div>

```
    </div>
```
```
</div>
```

Nesting of Grid Columns

The Bootstrap gird columns are nestable, that means you can put rows and columns inside an existing column. However, the formula for placing the columns will be the same, i.e. the sum of column numbers should be equal to 12 or less within a single row.

Example

```
<div class="container">
```
```
    <div class="row">
```
```
        <div class="col-sm-12">
```

            <!--Nested row within a column-->

```
            <div class="row">
```

                <div class="col-xs-4 col-sm-6"></div>

                <div class="col-xs-8 col-sm-6"></div>

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

Bootstrap Responsive Utilities Classes

You can use the following responsive classes to enable the visibility of elements on certain devices that screen sizes falls with the specific range.

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value: inline, block and inline-block.

Class	Description
`.visible-xs-*`	Makes the element visible only on extra small devices having screen width less than `768px`. Hidden on others.
`.visible-sm-*`	Makes the element visible only on small devices having screen width greater than or equal to `768px` (i.e. `≥768px`) but less than `992px`. Hidden on others.
`.visible-md-*`	Makes the element visible only on medium devices having screen width greater than or equal to `992px` (i.e. `≥992px`) but less than `1200px`. Hidden on others.
`.visible-lg-*`	Makes the element visible only on large devices having screen width greater than or equal to `1200px` (i.e. `≥1200px`). Hidden on others.

Tip:You can also mix these classes to make the elements visible on multiple devices. For example, you can apply the class .visible-xs-* and .visible-md-*on any element to make it visible on extra small and medium devices.

Example

<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>

<p class="visible-sm-block">This paragraph is visible only on small devices.</p>

<p class="visible-md-block">This paragraph is visible only on medium devices.</p>

<p class="visible-lg-block">This paragraph is visible only on large devices.</p>

Similarly you can use these hidden utility classes to hide the elements on certain devices.

Class	Description
`.hidden-xs`	Hide the elements only on extra small devices having screen width less than`768px`. Visible on others.
`.hidden-sm`	Hide the elements only on small devices having screen width greater than or equal to `768px` (i.e. `≥768px`) but less than `992px`. Visible on others.
`.hidden-md`	Hide the elements only on medium devices having screen width greater than or equal to `992px` (i.e. `≥992px`) but less than `1200px`. Visible on others.
`.hidden-lg`	Hide the elements only on large devices having screen width greater than or equal to `1200px` (i.e. `≥1200px`). Visible on others.

Tip:You can also mix these classes to make the elements hidden on multiple devices. For example you can apply the class .hidden-xs and .hidden-md on any element to make it hidden on extra small and medium devices.

Example

<p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>

<p class="hidden-sm">This paragraph is hidden only on small devices.</p>

<p class="hidden-md">This paragraph is hidden only on medium devices.</p>

<p class="hidden-lg">This paragraph is hidden only on large devices.</p>

Similar to the regular responsive classes, you can use the following utility classes to show or hide certain elements for printing purpose or devices.

Class	Description
`.visible-print-block`	Hide block elements for browser rendering while visible for print.
`.visible-print-inline`	Hide inline elements for browser rendering while visible for print.
`.visible-print-inline-block`	Hide inline-block elements for browser rendering while visible for print.
`.hidden-print`	Hide elements for printing while visible on browser.