Advanced Bootstrap Layouts

Introduction

While basic Bootstrap layouts rely on containers, rows, and columns, advanced layouts require a mix of nested grids, flexbox utilities, and responsive adjustments. In this chapter, we explore how to build complex, real-world layouts.

1. Nested Grids

To nest your content with the default grid, add a new .row and set of .col-* columns within an existing .col-* column.

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

2. Auto-layout Columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add values to separate classes for more flexibility.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <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>
</div>

3. Flexbox Utilities for Layout

Bootstrap 5 uses Flexbox for the grid system, meaning you can use flex utilities to align columns.

Vertical Alignment

<div class="row align-items-center">
  <div class="col"> One </div>
  <div class="col"> Two </div>
  <div class="col"> Three </div>
</div>

Horizontal Alignment

<div class="row justify-content-center">
  <div class="col-4"> Centered Column </div>
</div>

4. Combining Flexbox & Grid

You can mix standard grid classes with specific flex utilities for powerful layouts. For example, using .d-flex inside a column to create equal height cards (the default behavior of flex rows).

<div class="row">
  <div class="col-md-4 d-flex">
    <div class="card w-100">...</div>
  </div>
  <div class="col-md-4 d-flex">
    <div class="card w-100">...</div>
  </div>
</div>