Skip to main content

Bootstrap Grid

Overview

The Bootstrap grid was designed by two Twitter developers in the mid-2010s. It is used to align elements within a defined area of a page. Just as with the HTML table structure consists of row (tr) and column (td) elements, the Bootstrap Grid structure consists of same two parts... row and col. When constructing the grid think of the area as a table with rows and columns.

Row Identifier

To identify the beginning of a row enter the following HTML code... <div class="row">. At the end of the code identifying the columns enter the code... </div>

Col Identifier

Identifying the columns of the row is a little more complex. Each row of the grid structure can contain up to a total of 12 columns.  The 12 can be used separately or in groups of any number up to 12. The column identifier is... <div class="col-xx-nn"> where 'xx' is the breakpoint identifier and 'nn' identifies the number of columns.

  1. Breakpoint Identifier (xx) - The Breakpoint Identifier is used to identify at what viewport size the column width should be activated.. A detailed explanation of this identifier is beyond the scope of this document and the usage on the website. For this website it is preferred to simply use the 'xs' breakpoint identifier.

  2.  Number of Columns Identifier (nn) - The 'nn' identifier is simply a number from 1 to 12 that indicates the number of columns that are to be grouped together. Within any row area there can be multiple column areas as long as the number of columns does not exceed 12.
Offset Identifier

Sometimes it may be desired to not begin the column group at column 1 but to offset the column 'nn' number of columns. This is accomplished by using the offset identifier in the column class structure as follows... <div class="col-xs-4 col-xs-offset-nn"> where 'nn' is the number of columns to leave empty (offset). Note that the first class element identifies the number of columns that are to be grouped followed by the number of columns that are to be offset (empty).

A Grid with no Row Identifier

It is possible to construct a grid of this nature without using the Row Identifier (div with row class). BUT, be aware that the desired structure may not appear as you desire. This is because any space remaining after the columns are placed on the page by the browser will then be occupied by any following text on the page. Thus, it is best to always use the div Row class identifier.

Examples of Usage

Example of a grid with one row and two columns each with a group of 6.

  1. <div class="row">
  2. <div class="col-xs-6">
  3.     Column content
  4. </div> <!-- End of first group of 6 column -->
  5. <div class="col-xs-6">
  6.     Column content
  7. </div> <!-- End of second group of 6 column -->
  8. </div> <!-- End of row -->

Example of a grid with one row and two columns, first with a group of 4 and the second with a group of 8.

  1. <div class="row">
  2. <div class="col-xs-4">
  3.     Column content
  4. </div> <!-- End of first group of 6 column -->
  5. <div class="col-xs-8">
  6.     Column content
  7. </div> <!-- End of second group of 6 column -->
  8. </div> <!-- End of row -->

Example of a grid with one row and two columns, first with a group of 4 offset by 2 and the second with a group of 4.

  1. <div class="row">
  2. <div class="col-xs-4 col-xs-offset-2">
  3.     Column content
  4. </div> <!-- End of first group of 6 column -->
  5. <div class="col-xs-4">
  6.      Column content
  7. </div> <!-- End of second group of 6 column -->
  8. </div> <!-- End of row -->

Note that the number of column used only add up to 10... group of 4, plus offset of 2, plus group of 4.



No Comments
Back to top