Bootstrap 5 Learning Kit

Vertical alignment

Row

Grid with vertical alignment on .row using flex utilities

.col

Column

Grid with vertical alignment on .col using flex utilities

.col .align-self-start

.col .align-self-center

.col .align-self-end

<div class="container">
  <h4 class="h5 text-muted mt-3">Row</h4>
  <p>Grid with vertical alignment on .row using flex utilities</p>
</div>
<div class="container" data-example="row-height">
  <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">.col</div>
    <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>
<div class="container">
  <h4 class="h5 text-muted mt-3">Column</h4>
  <p>Grid with vertical alignment on .col using flex utilities</p>
</div>
<div class="container" data-example="row-height">
  <div class="row">
    <div class="col">.col .align-self-start</div>
    <div class="col">.col .align-self-center</div>
    <div class="col">.col .align-self-end</div>
  </div>
</div>

<div class="container"> <h4 class="h5 text-muted mt-3">Row</h4> <p>Grid with vertical alignment on .row using flex utilities</p> </div> <div class="container" data-example="row-height"> <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">.col</div> <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> <div class="container"> <h4 class="h5 text-muted mt-3">Column</h4> <p>Grid with vertical alignment on .col using flex utilities</p> </div> <div class="container" data-example="row-height"> <div class="row"> <div class="col">.col .align-self-start</div> <div class="col">.col .align-self-center</div> <div class="col">.col .align-self-end</div> </div> </div>

Horizontal alignment

Grid with horizontal alignment on .row using flex utilities

.col-3

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

Column wrapping

.col-8

.col-5

.col-4

<div class="container">
  <div class="row">
    <div class="col-8">.col-8</div>
    <div class="col-5">.col-5</div>
    <div class="col-4">.col-4</div>
  </div>
</div>

Column breaks

All breakpoints

Grid with column break using sizing utility class

.col-6 .col-sm-3

Responsive

Grid with responsive column break using sizing and display utility classes

.col-6 .col-sm-3

<h4 class="h5 text-muted mt-3 container">All breakpoints</h4>
<p>Grid with column break using sizing utility class</p>
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div></div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">Responsive</h4>
<p>Grid with responsive column break using sizing and display utility classes</p>
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div></div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

<h4 class="h5 text-muted mt-3 container">All breakpoints</h4> <p>Grid with column break using sizing utility class</p> <div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div> <h4 class="h5 text-muted mt-3 container">Responsive</h4> <p>Grid with responsive column break using sizing and display utility classes</p> <div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div>

Reordering

Grid reordering with flex utilities: order-first (-1), order-0 to order-5 and order-last (6)

First, but last

Second, but number 5

Third, but number 4

Fourth, but number 3

Fifth, but first

Last, but unordered, so number 2

<div class="container">
  <div class="row">
    <div class="col">First, but last</div>
    <div class="col">Second, but number 5</div>
    <div class="col">Third, but number 4</div>
    <div class="col">Fourth, but number 3</div>
    <div class="col">Fifth, but first</div>
    <div class="col">Last, but unordered, so number 2</div>
  </div>
</div>

<div class="container"> <div class="row"> <div class="col">First, but last</div> <div class="col">Second, but number 5</div> <div class="col">Third, but number 4</div> <div class="col">Fourth, but number 3</div> <div class="col">Fifth, but first</div> <div class="col">Last, but unordered, so number 2</div> </div> </div>

Offsetting

Offset classes

.col-md-5

.col-md-5 .offset-md-2

.col-lg-4 .offset-lg-3

.col-lg-2 .offset-lg-3

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Spacing utilities

.col-md-5

.col-md-5 .ms-auto

.col-lg-4 .ms-lg-auto

.col-lg-2 .ms-lg-auto

.col-sm-6 .me-lg-auto

.col-sm-3

<h4 class="h5 text-muted mt-3 container">Offset classes</h4>
<div class="container">
  <div class="row">
    <div class="col-md-5">.col-md-5</div>
    <div class="col-md-5">.col-md-5 .offset-md-2</div>
  </div>
  <div class="row">
    <div class="col-lg-4">.col-lg-4 .offset-lg-3</div>
    <div class="col-lg-2">.col-lg-2 .offset-lg-3</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>
<h4 class="h5 text-muted mt-3 container">Spacing utilities</h4>
<div class="container">
  <div class="row">
    <div class="col-md-5">.col-md-5</div>
    <div class="col-md-5">.col-md-5 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-lg-4">.col-lg-4 .ms-lg-auto</div>
    <div class="col-lg-2">.col-lg-2 .ms-lg-auto</div>
  </div>
  <div class="row">
    <div class="col-sm-6">.col-sm-6 .me-lg-auto</div>
    <div class="col-sm-3">.col-sm-3</div>
  </div>
</div>

<h4 class="h5 text-muted mt-3 container">Offset classes</h4> <div class="container"> <div class="row"> <div class="col-md-5">.col-md-5</div> <div class="col-md-5">.col-md-5 .offset-md-2</div> </div> <div class="row"> <div class="col-lg-4">.col-lg-4 .offset-lg-3</div> <div class="col-lg-2">.col-lg-2 .offset-lg-3</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> </div> </div> <h4 class="h5 text-muted mt-3 container">Spacing utilities</h4> <div class="container"> <div class="row"> <div class="col-md-5">.col-md-5</div> <div class="col-md-5">.col-md-5 .ms-auto</div> </div> <div class="row"> <div class="col-lg-4">.col-lg-4 .ms-lg-auto</div> <div class="col-lg-2">.col-lg-2 .ms-lg-auto</div> </div> <div class="row"> <div class="col-sm-6">.col-sm-6 .me-lg-auto</div> <div class="col-sm-3">.col-sm-3</div> </div> </div>

Standalone column classes

8.333333%

16.666667%

25%

33.333333%

41.666667%

50%

58.333333%

66.666667%

75%

83.333333%

91.666667%

100%

<div>8.333333%</div>
<div>16.666667%</div>
<div>25%</div>
<div>33.333333%</div>
<div>41.666667%</div>
<div>50%</div>
<div>58.333333%</div>
<div>66.666667%</div>
<div>75%</div>
<div>83.333333%</div>
<div>91.666667%</div>
<div>100%</div>

Page Navigation:

Columns