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 gx-0">
    <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 gx-1">
    <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 gx-2">
    <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 gx-3">
    <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 gx-4">
    <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 gx-5">
    <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 gx-0 gx-sm-1 gx-md-2 gx-lg-3 gx-xl-4 gx-xxl-5">
    <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 gx-0"> <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 gx-1"> <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 gx-2"> <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 gx-3"> <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 gx-4"> <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 gx-5"> <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 gx-0 gx-sm-1 gx-md-2 gx-lg-3 gx-xl-4 gx-xxl-5"> <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 gy-0">
    <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 gy-1">
    <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 gy-2">
    <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 gy-3">
    <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 gy-4">
    <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 gy-5">
    <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 gy-0 gy-sm-1 gy-md-2 gy-lg-3 gy-xl-4 gy-xxl-5">
    <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 gy-0"> <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 gy-1"> <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 gy-2"> <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 gy-3"> <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 gy-4"> <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 gy-5"> <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 gy-0 gy-sm-1 gy-md-2 gy-lg-3 gy-xl-4 gy-xxl-5"> <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 g-0">
    <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 g-1">
    <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 g-2">
    <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 g-3">
    <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 g-4">
    <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 g-5">
    <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 g-0 g-sm-1 g-md-2 g-lg-3 g-xl-4 g-xxl-5">
    <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 g-0"> <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 g-1"> <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 g-2"> <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 g-3"> <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 g-4"> <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 g-5"> <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 g-0 g-sm-1 g-md-2 g-lg-3 g-xl-4 g-xxl-5"> <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 g-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 g-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 g-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 g-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 g-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 g-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>