Grid Essentials

Bootstrap's grid is designed around a responsive, 12 column system implemented through Flexbox. Let's take a look at how it works.

The Basics

• Container
• Rows
• Columns
• Flexbox/CSS Grid

The grid system has three main components. We discussed the container class at the top of this course. In addition to that there are row and column classes that help you set up the grid.

There are also classes that relate to both flexbox and grid and you can combine these classes with the grid classes, but the grid is the main layout structure.

Grid

<div class="container">
  <div class="row">
    <div class="col">Column One</div>
    <div class="col">Column Two</div>
    <div class="col">Column Three</div>
  </div>
</div>

Try it

You can see the main classes in action. The container sets up the grid, the rows prepare the columns for display and the columns hold the content.

Container Metrics

Try it

Let's review the main container metrics. Specifically, you can see the grid breakpoints.

The regular container class will be 100% of the width of the container minus a bit of space around the edges.

Whenever your viewport reaches 576 pixels or greater, the content locks in to a width of 540 pixels. When the width reaches 768, then the width locks in at 720 pixels and so on and so forth.

There's also a series of container classes for the different breakpoints. The difference is that the width stays at 100% of the width UNTIL the width reaches one of the breakpoints.

Practice

1. Create a Hero Section
2. Center Hero Text
3. Put body copy in a container
4. Practice positioning and display classes