Bootstrap 5 Learning Kit – Reference

Equal width

Grid with auto-layout and equal width

.col

<div class="container">
  <div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
  <div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
</div>

One column width

Grid with auto-layout around one column with set width

.col

.col-7

.col

.col-3

.col

<div class="container">
  <div class="row">
    <div class="col">.col</div>
    <div class="col-7">.col-7</div>
    <div class="col">.col</div>
  </div>
  <div class="row">
    <div class="col-3">.col-3</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
</div>

Variable width content

Grid with auto-layout around columns with set width and natural (auto) width

.col

.col-auto

.col

.col-auto

.col-2

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

Responsive classes

All breakpoints

Same grid across all devices: use .col and .col-*

.col

.col-6

.col-3

Responsive

Advanced grid changing layout across different device sizes: use device prefixes

.col-12 .col-md-6 .col-lg-3

.col-6 .col-lg-3

.col-6 .col-sm-4

<div class="container">
  <h4 class="h5 text-muted mt-3">All breakpoints</h4>
  <p>Same grid across all devices: use .col and .col-*</p>
</div>
<div class="container">
  <div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-3">.col-3</div>
    <div class="col-3">.col-3</div>
  </div>
</div>
<div class="container">
  <h4 class="h5 text-muted mt-3">Responsive</h4>
  <p>Advanced grid changing layout across different device sizes: use device prefixes</p>
</div>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-3">.col-12 .col-md-6 .col-lg-3</div>
    <div class="col-12 col-md-6 col-lg-3">.col-12 .col-md-6 .col-lg-3</div>
    <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
    <div class="col-6 col-lg-3">.col-6 .col-lg-3</div>
  </div>
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

<div class="container"> <h4 class="h5 text-muted mt-3">All breakpoints</h4> <p>Same grid across all devices: use .col and .col-*</p> </div> <div class="container"> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col-6">.col-6</div> <div class="col-3">.col-3</div> <div class="col-3">.col-3</div> </div> </div> <div class="container"> <h4 class="h5 text-muted mt-3">Responsive</h4> <p>Advanced grid changing layout across different device sizes: use device prefixes</p> </div> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-3">.col-12 .col-md-6 .col-lg-3</div> <div class="col-12 col-md-6 col-lg-3">.col-12 .col-md-6 .col-lg-3</div> <div class="col-6 col-lg-3">.col-6 .col-lg-3</div> <div class="col-6 col-lg-3">.col-6 .col-lg-3</div> </div> <div class="row"> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> </div>

Row columns

Auto

Column

2

Column

3

Column

4

Column

Responsive

Advanced grid changing layout across different device sizes: use device prefixes

Column

<h4 class="h5 text-muted mt-3 container">Auto</h4>
<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">2</h4>
<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">3</h4>
<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">4</h4>
<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">Responsive</h4>
<p>Advanced grid changing layout across different device sizes: use device prefixes</p>
<div class="container">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<h4 class="h5 text-muted mt-3 container">Auto</h4> <div class="container"> <div class="row row-cols-auto"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> <h4 class="h5 text-muted mt-3 container">2</h4> <div class="container"> <div class="row row-cols-2"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> <h4 class="h5 text-muted mt-3 container">3</h4> <div class="container"> <div class="row row-cols-3"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> <h4 class="h5 text-muted mt-3 container">4</h4> <div class="container"> <div class="row row-cols-4"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> <h4 class="h5 text-muted mt-3 container">Responsive</h4> <p>Advanced grid changing layout across different device sizes: use device prefixes</p> <div class="container"> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>

Nesting

.col-md-12 .col-lg-6

.col-md-12 .col-lg-3

.col-md-4

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12 col-lg-6">.col-md-12 .col-lg-6</div>
        <div class="col-md-6 col-lg-3">.col-md-12 .col-lg-3</div>
        <div class="col-md-6 col-lg-3">.col-md-12 .col-lg-3</div>
      </div>
    </div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

Page Navigation:

Grid

Equal width

One column width

Variable width content

Responsive classes

All breakpoints

Responsive

Row columns

Auto

2

3

4

Responsive

Nesting