This article is written by Pieter van der Westhuizen, the author of Bootstrap for ASP.NET MVC. Many websites are reporting an increasing amount of mobile traffic and this trend is expected to increase over the coming years. The Bootstrap grid system is mobile-first, which means it is designed to target devices with smaller displays and then grow as the display size increases.

Fortunately, this is not something you need to be too concerned about as Bootstrap takes care of most of the heavy lifting.

(For more resources related to this topic, see here.)

Bootstrap grid options

Bootstrap 3 introduced a number of predefined grid classes in order to specify the sizes of columns in your design. These class names are listed in the following table:

The Bootstrap grid is divided into 12 columns. When laying out your web page, keep in mind that all columns combined should be a total of 12. To illustrate this, consider the following HTML code:

<div class=”container”>
<div class=”row”>
<div class=”col-md-3″ style=”background-color:green;”>
<h3>green</h3>
</div>
<div class=”col-md-6″ style=”background-color:red;”>
<h3>red</h3>
</div>
<div class=”col-md-3″ style=”background-color:blue;”>
<h3>blue</h3>
</div>
</div>
</div>

In the preceding code, we have a <div> element, container, with one child <div> element, row. The row div element in turn has three columns. You will notice that two of the columns have a class name of col-md-3 and one of the columns has a class name of col-md-6. When combined, they add up to 12.

The preceding code will work well on all devices with a resolution of 992 pixels or higher. To preserve the preceding layout on devices with smaller resolutions, you’ll need to combine the various CSS grid classes. For example, to allow our layout to work on tablets, phones, and medium-sized desktop displays, change the HTML to the following code:

<div class=”container”>
<div class=”row”>
<div class=”col-xs-3 col-sm-3 col-md-3″ style=”backgroundcolor:
green;”>
<h3>green</h3>
</div>
<div class=”col-xs-6 col-sm-6 col-md-6″ style=”backgroundcolor:
red;”>
<h3>red</h3>
</div>
<div class=”col-xs-3 col-sm-3 col-md-3″ style=”backgroundcolor:
blue;”>
<h3>blue</h3>
</div>
</div>
</div>

By adding the col-xs-* and col-sm-* class names to the div elements, we’ll ensure that our layout will appear the same in a wide range of device resolutions.

Bootstrap HTML elements

Bootstrap provides a host of different HTML elements that are styled and ready to use. These elements include the following:

• Tables
• Buttons
• Forms
• Images