Grid Examples

Grid Examples

Let's put the grid together with real-world layouts.

Two columns: sidebar plus content

<div class="row">
  <div class="col-sm-4 bg-primary">Sidebar</div>
  <div class="col-sm-8 bg-success">Main content</div>
</div>

Three equal columns

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col">2 of 3</div>
  <div class="col">3 of 3</div>
</div>

Unequal columns

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

Responsive blog layout

<div class="row">
  <div class="col-md-8">Blog post</div>
  <div class="col-md-4">Sidebar</div>
</div>
<div class="row">
  <div class="col-md-4">Card 1</div>
  <div class="col-md-4">Card 2</div>
  <div class="col-md-4">Card 3</div>
</div>

Nested rows

You can nest a row inside a column:

<div class="row">
  <div class="col-sm-9">
    Level 1: col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">Nested 1</div>
      <div class="col-4 col-sm-6">Nested 2</div>
    </div>
  </div>
</div>

Column offset

Use offset classes to push columns. In Bootstrap 5 you can use .offset-md-3 or auto margins with .ms-auto:

<div class="row">
  <div class="col-md-6 ms-auto">Pushed to the right</div>
</div>

TL;DR

• Common patterns: sidebar + content, equal columns, cards.
• Rows can be nested inside columns.
• .ms-auto pushes a column to the right.
• Background utilities help visualize grid areas.