Intro to Bootstrap Grid

keeping it simple & explaining it like you’re 5.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It allows up to 12 columns across the page.

You can have max 12 columns in each row. columns will stack if it’s over 12.

Here is an example of a simple grid using Bootstrap:

<div class="container">
  <div class="row"> 
   <div class="col">
   </div>
  </div>
</div>

Let’s break down what’s happening above:

• <div class=”container”>: “container” holds all the rows and columns for proper alignment and padding. FYI- Bootstrap 4 has 2 types of Containers: container-fluid & container. ‘container-fluid’ is a full-width container for a layout the spans the entire width and ‘container’ is a fixed-width container to center your layout in the middle.
• <div class=”row”>: “row” creates horizontal groups of the columns
• <div class=”col”>: “col” (column) creates columns for that specific row & since there are no other columns specified in that row, it automatically sets it as one big column in that row. I like to think that there are 12 mini columns in that one big col. “col” would be the same as saying “col-12”.

col = col-12

Here’s another example but with 2 columns this time:

<div class="container">
  <div class="row">
   <div class="col-8">
 
     <div class="col-4">
     </div>
  
    </div>
  </div>
</div>

Let’s break this grid down:

• col-8 and col-4 are two columns in the same row. but one is equal to 8 and the other equal to 4 and those combined form 1 row that adds up to 12 columns. pretty simple right? below is what that would look like.

col-8 + col-4 = col-12

Here’s an example of a container with 2 rows this time but without the column numbers specified:

<div class="container">
  <div class="row">  // 1st row
    <div class="col"> // 1st column
      6 columns
    </div>
    <div class="col"> // 2nd column
      6 columns
    </div>
  </div>
<div class="row">  // 2nd row
    <div class="col"> // 1st column
      4 columns
    </div>
    <div class="col"> // 2nd column
      4 columns
    </div>
    <div class="col"> // 3rd column
      4 columns
    </div>
  </div>
</div>

what the grid would look like with the code above

Let’s break this one down:

• in ‘1st row’, bootstrap does the math for us and splits the 2 columns evenly to 6columns + 6columns to equal 12 columns since we did not specify a number to each column.
• in ‘2nd row’, the same thing happens but it’s split into 4 columns each in each column to equal 12.
• ***Keep in mind that I wrote ‘6 columns’ & ‘4 columns’ inside the COL div. You do not write text in the ROW div. Rows are specifically for COLUMNS and your text goes in the columns.*** See example below.

<div class="container">
  <div class="row">
   DO NOT WRITE IN A ROW. ONLY COLUMNS ARE PLACED IN ROW.
  </div>
</div>