XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px

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>