Bootstrap Basics

Bootstrap is a flexible grid system used for creating responsive content. This is based on a 12 column layout, achieved through the use of Rows. Each row takes up 100% of the available width, which is the equivalent of 12 columns. Instead of using percentages to determine each column’s width, we use the numbers of 1-12. These numbers can be manipulated to create the necessary amount and width of columns, depending how you want the content to be laid out. Below are a few examples to help you understand in addition to a chart of each number’s percentage equivalent. Each row must have its respective columns collectively add up to 12 (no more, no less).

For example:
  • 6 + 6 = 12 (2 columns at 50% each)
  • 3 + 3 + 6 = 12 (3 columns, 2 at 25% and 1 at 50%)
  • 4 + 4 + 2 + 2 = 12 (4 columns, 2 at 25% and 2 at 16.6%)
  • 1 = 8.3%
  • 2 = 16.6%
  • 3 = 25% (1/4)
  • 4 = 33.3% (1/3)
  • 5 = 41.6%
  • 6 = 50% (1/2)
  • 7 = 58.3%
  • 8 = 66.6% (2/3)
  • 9 = 75% (3/4)
  • 10 = 83.3%
  • 11 = 91.6%
  • 12 = 100%

How to Create a Responsive Row with Standard Columns

Step 1: Insert Row Code

The code below is to define a row. The blank line in the middle is where you will place your columns.

<div class= "row">

</div>

Step 2: Insert Column(s) Code

The code below is to define a single column. This and ALL columns will go between the row tags above. The middle line is where the column’s content will go. As a placeholder, a paragraph using the word “column content” is used, this way you can see where to add content in the editor window.

<div class= "span#">  
<p>column content</p> 
    </div>

Insert as many columns as you’ll need in between the row tags, being sure to place each column code in succession after the other.

Step 3: Set Column Widths

Replace the “#” in each column’s code with a number. Remember that they must add up to 12. With the below example, let’s say I wanted two columns of equal width. I would replace the X with a 6 for each. 

EXAMPLE – 2 Columns, Equal Width
BEFORE AFTER
<div class= "row"> 
  <div class= "span#"> 
    <p>column content</p> 
  </div> 

  <div  class= "span#> 
    <p>column content</p> 
  </div> 
</div> 
<div class= "row"> 
  <div class= "span6"> 
    <p>column content</p> 
  </div> 

  <div class= "span6> 
    <p>column content</p> 
  </div> 
</div> 

 Remember to reference the percentage chart at the beginning of the article, if needed and that each row’s column numbers must amount to 12.

Commonly Used Examples

2 Columns
1 column @ 2/3, 1 column @ 1/3

<div class= "row"> 
   <div class= "span8"> 
      <p>column content</p> 
   </div> 
   <div class= "span4"> 
     <p>column content</p> 
    </div> 
 </div>  
1 column @ 3/4, 1 column @ 1/4

<div class= "row"> 
   <div class= "span9"> 
      <p>column content</p> 
   </div> 
   <div class= "span3"> 
      <p>column content</p> 
    </div> 
 </div>  
1 column @ 5/6, 1 column @ 1/6

<div class= "row"> 
   <div class= "span10"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
</div> 

3 Columns
1 column @ 1/2, 2 columns @ 1/4 each

 <div class= "row"> 
   <div class= "span6"> 
      <p>column content</p> 
   </div> 
   <div class= "span3"> 
     <p>column content</p> 
    </div>  
 <div class= "span3">  
     <p>column content</p>  
    </div>  
 </div>  
3 columns @ 1/3 each

<div class= "row"> 
   <div class= "span4">  
      <p>column content</p>  
   </div>  
   <div class= "span4">  
      <p>column content</p>  
   </div>  
   <div class= "span4">  
      <p>column content</p>  
   </div>  
</div> 
1 column @ 2/3, 2 columns @ 1/6 each

<div class= "row"> 
   <div class= "span8"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
</div> 

4 Columns
4 columns @ 1/4 each

<div class= "row"> 
   <div class= "span3"> 
      <p>column content</p> 
   </div> 
   <div class= "span3"> 
      <p>column content</p> 
   </div> 
   <div class= "span3"> 
      <p>column content</p> 
   </div> 
   <div class= "span3"> 
      <p>column content</p> 
   </div> 
</div> 
1 column @ 1/2, 3 columns @ 1/6 each

<div class= "row"> 
   <div class= "span6"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
</div> 
2 columns @ 1/3, 2 columns @ 1/6 each

<div class= "row">    
   <div class= "span4"> 
      <p>column content</p> 
   </div> 
   <div class= "span4"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
   <div class= "span2"> 
      <p>column content</p> 
   </div> 
</div> 

Offsetting/Centering Columns

Offset commands will generate a new, blank column of your desired width to serve as a left margin, pushing the content of your column to the right. Most often, this is used to center one column’s content, but can of course be used to offset others.
<div class="span# offset#>
The first number in the code is the content column’s width (from the standard responsive columns section). The second number is the width of the offset cell to the left.

Centering

Look at the table below and find which percentage of space you would like available from the left column. Then, copy the code to its right and paste in your editor’s Source tab. (2 columns of equal width on each side).

PLEASE NOTE: Only these options are available

Centered Content Space  Code
83.3% <div class="row"> 
<div class="span10 offset1"> 
<p>column content</p> 
</div></div>
75% <div class="row"> 
<div class="span8 offset2"> 
<p>column content</p> 
</div></div>
50% <div class="row"> 
<div class="span6 offset3"> 
<p>column content</p> 
</div></div>
33.3% <div class="row"> 
<div class="span4 offset4"> 
<p>column content</p> 
</div></div>
16.6% <div class="row"> 
<div class="span2 offset5"> 
<p>column content</p> 
</div></div>
Standard Offsetting 
Standard offsetting is the same type of code as centering. The only differences are that your content will not center and your column/offset numbers are not limited to the 5 centering options above.
Copy the code and paste into your editor’s Source tab.
Replace the first highlighted “#” to the desired width number of the content column.
Replace the second highlighted “#” to the desired width number of the blank column on the left.
<div class="row"> 
   <div class="col-md-# offset-md-#> 
      <p>column content</p> 
   </div>
IMPORTANT NOTES:
  • The two combined numbers cannot exceed 12.
  • The two combined numbers do not have to equal 12, but this is only if you plan on adding additional columns. If you choose to do this, insert the standard responsive column(s) in their desired spot within the row code.
  • You may use multiple offset codes in the same row, if desired.

Commonly Used Examples

Blank column (L) at 1/2 Content column (R) @ 1/2     

<div class= "row"> 
   <div class="span6 offset6"> 
      <p>column content</p> 
   </div> 
</div> 
Blank column (L) at 1/3 Content column (R) @ 2/3     

<div class= "row"> 
   <div class="span8 offset4"> 
      <p>column content</p> 
   </div> 
</div> 
Blank column (L) at 1/4 Content column (R) @ 3/4     

<div class= "row"> 
   <div class="span9 offset3"> 
      <p>column content</p> 
   </div> 
</div> 

Still need help? Contact Us Contact Us