Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
HorizontalVerticalHorizontal and verticalRow columns

Gutters

Horizontal

0

Column
Column
Column
Column

1

Column
Column
Column
Column

2

Column
Column
Column
Column

3

Column
Column
Column
Column

4

Column
Column
Column
Column

5

Column
Column
Column
Column

Responsive

Column
Column
Column
Column
<h4 class="h5 text-muted mt-3 container">0</h4>
<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">1</h4>
<div class="container">  
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">2</h4>
<div class="container">  
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">3</h4>
<div class="container">  
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">4</h4>
<div class="container">  
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">5</h4>
<div class="container">  
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">Responsive</h4>
<div class="container">  
  <div class="row">
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-3">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">0</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">1</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">2</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">3</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">4</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">5</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">Responsive</h4> <div class="container"> <div class="row"> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-3"> <div class="p-3 border bg-light">Column</div> </div> </div> </div>

Vertical

0

Column
Column
Column
Column

1

Column
Column
Column
Column

2

Column
Column
Column
Column

3

Column
Column
Column
Column

4

Column
Column
Column
Column

5

Column
Column
Column
Column

Responsive

Column
Column
Column
Column
<h4 class="h5 text-muted mt-3 container">0</h4>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">1</h4>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">2</h4>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">3</h4>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">4</h4>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">5</h4>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">Responsive</h4>
<div class="container">  
  <div class="row">
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-12">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">0</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">1</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">2</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">3</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">4</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">5</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">Responsive</h4> <div class="container"> <div class="row"> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-12"> <div class="p-3 border bg-light">Column</div> </div> </div> </div>

Horizontal and vertical

0

Column
Column
Column
Column

1

Column
Column
Column
Column

2

Column
Column
Column
Column

3

Column
Column
Column
Column

4

Column
Column
Column
Column

5

Column
Column
Column
Column

Responsive

Column
Column
Column
Column
<h4 class="h5 text-muted mt-3 container">0</h4>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">1</h4>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">2</h4>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">3</h4>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">4</h4>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">5</h4>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">Responsive</h4>
<div class="container">  
  <div class="row">
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Column</div>
    </div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">0</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">1</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">2</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">3</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">4</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">5</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div> <h4 class="h5 text-muted mt-3 container">Responsive</h4> <div class="container"> <div class="row"> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Column</div> </div> </div> </div>

Row columns

2

Column
Column
Column
Column

3

Column
Column
Column
Column

4

Column
Column
Column
Column
<h4 class="h5 text-muted mt-3 container">2</h4>
<div class="container">
  <div class="row row-cols-2">
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </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">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </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">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column</div>
    </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"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </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"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </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"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> <div class="col"> <div class="p-3 border bg-light">Column</div> </div> </div> </div>