Grid System

Use Bootstrap's powerful mobile-first flexbox grid to build layouts of all shapes and sizes. Read the Official Bootstrap Documentation for a full list of instructions and other options.

How It Works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

<div class="row g-2">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Setting One Column Width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

<div class="row g-2">
  <div class="col">...</div>
  <div class="col-5">...</div>
  <div class="col">...</div>
</div>

Variable Width Content

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

<div class="row g-2">
  <div class="col">...</div>
  <div class="col-auto">...</div>
  <div class="col">...</div>
</div>

Stacked To Horizontal

Using a single set of classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint.

<div class="row g-2">
  <div class="col-sm-7">...</div>
  <div class="col-sm-5">...</div>
</div>

Row columns

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

<div class="row row-cols-2 g-2">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>