Columns
Vertical alignment
Row
Grid with vertical alignment on .row using flex utilities
.col
.col
.col
.col
.col
.col
.col
.col
.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 align-items-start">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row align-items-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row align-items-end">
<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 align-self-start">.col .align-self-start</div>
<div class="col align-self-center">.col .align-self-center</div>
<div class="col align-self-end">.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 align-items-start">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row align-items-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row align-items-end">
<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 align-self-start">.col .align-self-start</div>
<div class="col align-self-center">.col .align-self-center</div>
<div class="col align-self-end">.col .align-self-end</div>
</div>
</div>
Horizontal alignment
Grid with horizontal alignment on .row using flex utilities
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
<div class="container">
<!-- flex utilities classes -->
<div class="row justify-content-start">
<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 justify-content-center">
<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 justify-content-end">
<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 justify-content-around">
<!-- space equally around -->
<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 justify-content-between">
<!-- space between them -->
<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 justify-content-evenly">
<!-- space evenly between them -->
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
</div>
<div class="container">
<!-- flex utilities classes -->
<div class="row justify-content-start">
<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 justify-content-center">
<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 justify-content-end">
<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 justify-content-around">
<!-- space equally around -->
<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 justify-content-between">
<!-- space between them -->
<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 justify-content-evenly">
<!-- space evenly between them -->
<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>
<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
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Responsive
Grid with responsive column break using sizing and display utility classes
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.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 class="w-100"></div>
<!-- force a break -->
<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 class="w-100 d-none d-lg-block"></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 class="w-100"></div>
<!-- force a break -->
<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 class="w-100 d-none d-lg-block"></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 order-last">First, but last</div>
<div class="col order-3">Second, but number 5</div>
<div class="col order-2">Third, but number 4</div>
<div class="col order-1">Fourth, but number 3</div>
<div class="col order-first">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 order-last">First, but last</div>
<div class="col order-3">Second, but number 5</div>
<div class="col order-2">Third, but number 4</div>
<div class="col order-1">Fourth, but number 3</div>
<div class="col order-first">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 offset-md-2">.col-md-5 .offset-md-2</div>
</div>
<div class="row">
<div class="col-lg-4 offset-lg-3">.col-lg-4 .offset-lg-3</div>
<div class="col-lg-2 offset-lg-3">.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-md-2 col-lg-6 col-lg-0">.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 ms-auto">.col-md-5 .ms-auto</div>
</div>
<div class="row">
<div class="col-lg-4 ms-lg-auto">.col-lg-4 .ms-lg-auto</div>
<div class="col-lg-2 ms-lg-auto">.col-lg-2 .ms-lg-auto</div>
</div>
<div class="row">
<div class="col-sm-6 me-lg-auto">.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 offset-md-2">.col-md-5 .offset-md-2</div>
</div>
<div class="row">
<div class="col-lg-4 offset-lg-3">.col-lg-4 .offset-lg-3</div>
<div class="col-lg-2 offset-lg-3">.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-md-2 col-lg-6 col-lg-0">.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 ms-auto">.col-md-5 .ms-auto</div>
</div>
<div class="row">
<div class="col-lg-4 ms-lg-auto">.col-lg-4 .ms-lg-auto</div>
<div class="col-lg-2 ms-lg-auto">.col-lg-2 .ms-lg-auto</div>
</div>
<div class="row">
<div class="col-sm-6 me-lg-auto">.col-sm-6 .me-lg-auto</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
</div>
Standalone column classes
16.666667%
8.333333%
25%
33.333333%
41.666667%
50%
58.333333%
66.666667%
75%
83.333333%
91.666667%
100%
<div class="col-1">16.666667%</div>
<div class="col-2">8.333333%</div>
<div class="col-3">25%</div>
<div class="col-4">33.333333%</div>
<div class="col-5">41.666667%</div>
<div class="col-6">50%</div>
<div class="col-7">58.333333%</div>
<div class="col-8">66.666667%</div>
<div class="col-9">75%</div>
<div class="col-10">83.333333%</div>
<div class="col-11">91.666667%</div>
<div class="col-12">100%</div>
<div class="col-1">16.666667%</div>
<div class="col-2">8.333333%</div>
<div class="col-3">25%</div>
<div class="col-4">33.333333%</div>
<div class="col-5">41.666667%</div>
<div class="col-6">50%</div>
<div class="col-7">58.333333%</div>
<div class="col-8">66.666667%</div>
<div class="col-9">75%</div>
<div class="col-10">83.333333%</div>
<div class="col-11">91.666667%</div>
<div class="col-12">100%</div>