The Bootstrap Grid System

Bootstrap, a popular open-source front-end framework produced by Twitter, is a very helpful tool that allows developers to make responsive, mobile first websites.  The skeleton of Bootstrap is its grid system.  The Bootstrap grid system is one of the most helpful parts of the framework enabling a wide amount of flexibility.

The Bootstrap grid system is based on rows and columns.  A row can take up as much vertical room as the developer needs but horizontally a row can only have twelve columns.  These couple of rules allow for sufficient guidance while allowing for maximum flexibility.  For example, a developer can easily split the page in to two columns of six if they want to have the page display two columns equally, or the developer can split the page into a column of eight and a column of four to make a page that has a sidebar with main content in the larger column.

To use the Bootstrap grid system developers just need to add the appropriate classes to their HTML elements.  For example, to make those two columns that are split evenly the developer could write

<div class=”col-6”></div>

<div class=”col-6”></div>

Or, if a developer wanted to make two columns with a main content section and a sidebar they could write

<div class=”col-8”></div>

<div class=”col-4”></div>

In addition, the Bootstrap grid system allows the developer to decide if columns will be bigger or smaller depending on the size of the device the user is on. For example, these columns would display on a medium size device like an Ipad:

<div class=”col-md-6”></div>

<div class=”col-md-6”></div>

In conclusion, the Bootstrap grid system is a powerful tool that enables developers to create responsive and flexible front-end layouts quickly and easily.  By taking advantage of the wide range of classes and utilities available, developers can create website that look great whether the user is on a mobile device or a large screen desktop.  Beginner developers and experienced developers would do well to understand it and use it to it’s fullest possible extent.