# 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... **<span style="color: #e03e2d;">&lt;div class="row"&gt;</span>**. At the end of the code identifying the columns enter the code... &lt;/div&gt;

##### **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... **<span style="color: #e03e2d;">&lt;div class="col-xx-nn"&gt;</span>** where '**<span style="color: #e03e2d;">xx</span>**' is the breakpoint identifier and '**<span style="color: #e03e2d;">nn</span>**' 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 '**<span style="color: #e03e2d;">x</span><span style="color: #e03e2d;">s</span>**' breakpoint identifier.
2. **Number of Columns Identifier (nn)** - The '<span style="color: #e03e2d;">**nn**</span>' 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 '**<span style="color: #e03e2d;">nn</span>**' number of columns. This is accomplished by using the **offset** identifier in the column class structure as follows... <span style="color: #e03e2d;">**&lt;div class="col-xs-4 col-xs-offset-nn"&gt;**</span> where '**<span style="color: #e03e2d;">nn</span>**' 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. &lt;div class="row"&gt;
2. &lt;div class="col-xs-**<span style="color: #e03e2d;">6</span>**"&gt;
3. Column content
4. &lt;/div&gt; &lt;!-- End of first group of 6 column --&gt;
5. &lt;div class="col-xs-**<span style="color: #e03e2d;">6</span>**"&gt;
6. Column content
7. &lt;/div&gt; &lt;!-- End of second group of 6 column --&gt;
8. &lt;/div&gt; &lt;!-- End of row --&gt;

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. &lt;div class="row"&gt;
2. &lt;div class="col-xs-**<span style="color: #e03e2d;">4</span>**"&gt;
3. Column content
4. &lt;/div&gt; &lt;!-- End of first group of 6 column --&gt;
5. &lt;div class="col-xs-**<span style="color: #e03e2d;">8</span>**"&gt;
6. Column content
7. &lt;/div&gt; &lt;!-- End of second group of 6 column --&gt;
8. &lt;/div&gt; &lt;!-- End of row --&gt;

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. &lt;div class="row"&gt;
2. &lt;div class="col-xs-**<span style="color: #e03e2d;">4 col-xs-offset-2</span>**"&gt;
3. Column content
4. &lt;/div&gt; &lt;!-- End of first group of 6 column --&gt;
5. &lt;div class="col-xs-**<span style="color: #e03e2d;">4</span>**"&gt;
6. Column content
7. &lt;/div&gt; &lt;!-- End of second group of 6 column --&gt;
8. &lt;/div&gt; &lt;!-- End of row --&gt;

Note that the number of column used only add up to **<span style="color: #e03e2d;">10</span>**... group of **<span style="color: #e03e2d;">4</span>**, plus offset of **<span style="color: #e03e2d;">2</span>**, plus group of **<span style="color: #e03e2d;">4</span>**.