Grid

Bootstrap's mobile-first 12-column flexbox grid system. Use .row and .col-* classes to build responsive layouts.

Basic Grid

col
col
col
col-4
col-4
col-4
							<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

Grid Options

xs 576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px xxl ≥1400px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (0.75rem on each side)
Nestable Yes

Equal Width

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
							<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>

Setting One Column Width

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
							<div class="row">
  <div class="col">1 of 3</div>
  <div class="col-6">2 of 3 (wider)</div>
  <div class="col">3 of 3</div>
</div>

Stacked to Horizontal

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

Mix and Match

col-md-8
col-6 col-md-4
col-6 col-md-4
col-6 col-md-4
col-6 col-md-4
							<div class="row">
  <div class="col-md-8">col-md-8</div>
  <div class="col-6 col-md-4">col-6 col-md-4</div>
</div>

Row Columns

Column
Column
Column
Column
Column
Column
Column
							<div class="row row-cols-2">
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>
<div class="row row-cols-3">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

Nesting

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