Bootstrap Grid: Gutters, Offset, Order and Nesting

After the basics, the grid has many options for spacing, alignment, order and nesting. Here are the most useful ones.

Gutters

The gutter is the space between the columns. Use g-* (both directions), gx-* (horizontal) and gy-* (vertical) on the row. The numbers are from 0 to 5. Use g-0 for no gutter.

<div class="container text-center">
  <div class="row g-4">
    <div class="col-6"><div class="p-3 border bg-light">g-4</div></div>
    <div class="col-6"><div class="p-3 border bg-light">g-4</div></div>
    <div class="col-6"><div class="p-3 border bg-light">g-4</div></div>
    <div class="col-6"><div class="p-3 border bg-light">g-4</div></div>
  </div>
</div>

Offset: move a column to the right

<div class="container text-center">
  <div class="row mb-2">
    <div class="col-md-4 border bg-light py-2">col-md-4</div>
    <div class="col-md-4 offset-md-4 border bg-light py-2">col-md-4 offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-6 offset-3 border bg-light py-2">col-6 offset-3 (centered)</div>
  </div>
</div>

The offset adds empty columns on the left. You can also use margin utilities like ms-auto.

Order

Change the visual order of the columns with order-*. It is useful for responsive designs, for example to show the sidebar first on mobile.

<div class="container text-center">
  <div class="row">
    <div class="col order-2 border bg-light py-2">First in HTML (order-2)</div>
    <div class="col order-3 border bg-light py-2">Second in HTML (order-3)</div>
    <div class="col order-1 border bg-light py-2">Third in HTML (order-1)</div>
  </div>
</div>

Row columns

Instead of writing a class on every column, use row-cols-* on the row to say how many columns are in each line.

<div class="container text-center">
  <div class="row row-cols-2 row-cols-md-4 g-2">
    <div class="col"><div class="p-2 border bg-light">1</div></div>
    <div class="col"><div class="p-2 border bg-light">2</div></div>
    <div class="col"><div class="p-2 border bg-light">3</div></div>
    <div class="col"><div class="p-2 border bg-light">4</div></div>
    <div class="col"><div class="p-2 border bg-light">5</div></div>
    <div class="col"><div class="p-2 border bg-light">6</div></div>
  </div>
</div>

Nesting

You can put a new row inside a column. The nested columns again have a 12 column grid.

<div class="container">
  <div class="row">
    <div class="col-8 border bg-light p-2">
      Level 1: col-8
      <div class="row mt-2 text-center">
        <div class="col-6"><div class="border bg-white p-2">Level 2: col-6</div></div>
        <div class="col-6"><div class="border bg-white p-2">Level 2: col-6</div></div>
      </div>
    </div>
    <div class="col-4 border bg-light p-2">Level 1: col-4</div>
  </div>
</div>

Alignment

Use the flex utilities on the row: align-items-start | center | end for the vertical alignment, and justify-content-start | center | end | between | around for the horizontal one.

<div class="container text-center">
  <div class="row align-items-center justify-content-around bg-body-tertiary" style="height:120px">
    <div class="col-3 border bg-white py-2">centered</div>
    <div class="col-3 border bg-white py-4">taller</div>
  </div>
</div>

Breakpoint of the row-cols and the gutter

The gutter and the row-cols classes can also have a breakpoint, for example g-2 g-md-4 and row-cols-1 row-cols-lg-3.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.