Columns

How they work #

The following points describe how columns work:

• Columns build on the grid's flexbox architecture. Flexbox means we have options for changing individual columns and modifying columns at the row level. You choose how columns grow, shrink, or change.
• When building grid layouts, all content goes in columns. The hierarchy of the grid system goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
• Thanks to the availability of responsive variations, creating responsive layouts is fast and easy.

Alignment #

Use flexbox alignment utilities to vertically and horizontally align columns. The alignment is based entirely on flexbox, therefore, it may be a good idea to also check the flex utilities to get the full idea of what's possible.

Alignment Vertical alignment #

Change the vertical alignment with any of the responsive .align-items-* classes on the row level, or .align-self-* on the column level.

<!-- Align items start -->
<div class="container">
  <div class="row align-items-start">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<!-- Align items center -->
<div class="container">
  <div class="row align-items-center">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<!-- Align items end -->
<div class="container">
  <div class="row align-items-end">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<!-- Align self start, center, end -->
<div class="container">
  <div class="row">
    <div class="col align-self-start">Column</div>
    <div class="col align-self-center">Column</div>
    <div class="col align-self-end">Column</div>
  </div>
</div>

Alignment Horizontal alignment #

Change the horizontal alignment with any of the responsive .justify-content-* classes.

<!-- Justify content start -->
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

<!-- Justify content center -->
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

<!-- Justify content end -->
<div class="container">
  <div class="row justify-content-end">
    <div class="col-4">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

<!-- Justify content around -->
<div class="container">
  <div class="row justify-content-around">
    <div class="col-4">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

<!-- Justify content between -->
<div class="container">
  <div class="row justify-content-between">
    <div class="col-4">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

<!-- Justify content evenly -->
<div class="container">
  <div class="row justify-content-evenly">
    <div class="col-4">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

Alignment Column wrapping #

If the total column values exceed 12 within a single row, each group of extra columns will, as one unit, wrap onto a new line. For instance, in the following example, the second and third column wraps onto a new line because (10 + 4 = 14) > 12.

<!-- Column wrapping -->
<div class="container">
  <div class="row g-3 justify-content-center">
    <div class="col-10">Col-10</div>
    <div class="col-4">Col-4</div>
    <div class="col-6">Col-6</div>
  </div>
</div>

Alignment Column breaks #

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .row containers, but not every implementation method can account for this.

<!-- Column breaks -->
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 col-sm-4">Col-6-sm-4</div>
    <div class="col-6 col-sm-4">Col-6-sm-4</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-4">Col-6-sm-4</div>
    <div class="col-6 col-sm-4">Col-6-sm-4</div>
  </div>
</div>

You may also apply this break at specific breakpoints with our responsive display utilities.

<!-- Column breaks -->
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 col-sm-4">Col-6-sm-4</div>
    <div class="col-6 col-sm-4">Col-6-sm-4</div>

    <!-- Force next columns to break to new line at sm breakpoint and up -->
    <div class="w-100 d-none d-sm-block"></div>

    <div class="col-6 col-sm-4">Col-6-sm-4</div>
    <div class="col-6 col-sm-4">Col-6-sm-4</div>
  </div>
</div>

Reordering #

Columns can be reordered and positioned using order and offset classes. Moreover, because the grid system is based on flexbox, you can also use margin utilities to push and push columns along the main flex direction.

Reordering Order classes #

Use .order-{value} classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint using .order-{breakpoint}-{value}. The {value} can be 1, 2, 3, 4, or 5.

There are also responsive .order-first / .order-{breakpoint}-first and .order-last / .order-{breakpoint}-last classes that change the order of an element by applying order: -1 and order: 6, respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

<!-- Ordering columns (1 to 5) -->
<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col order-5">Column 2</div>
    <div class="col order-1">Column 3</div>
  </div>
</div>

<!-- Ordering columns (first and last) -->
<div class="container">
  <div class="row">
    <div class="col order-last">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col order-first">Column 3</div>
  </div>
</div>

Reordering Offsetting columns #

Move columns to the right using .offset-{value} / .offset-{breakpoint}-{value}, where the {value} can be any whole number from 0 to 11. These classes increase the left margin of a column by {value} columns. For example, .offset-md-4 moves the column over four columns for the medium breakpoint and up.

Please note, in addition to column clearing at responsive breakpoints, you may also need to reset offsets using .offset-0 / .offset-{breakpoint}-0.

<!-- Offsetting columns -->
<div class="container">
  <div class="row">
    <div class="col-md-4">Col-md-4</div>
    <div class="col-md-4 offset-md-4">Col-md-4</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-5 offset-md-1">Col-md-5</div>
    <div class="col-md-5 offset-md-1">Col-md-5</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-6 offset-3">Col-6</div>
  </div>
</div>

<!-- Resetting offset -->
<div class="container">
  <div class="row">
    <div class="col-5 col-md-6">Col-5-md-6</div>
    <div class="col-5 offset-2 col-md-6 offset-md-0">Col-5-md-6</div>
  </div>
</div>

Reordering Offsetting columns with margin utilities #

Thanks to the underlying flexbox architecture, you can use margin utilities like .ms-auto / .me-auto to force sibling columns away from one another.

<!-- Offsetting columns with margin utilities -->
<div class="container">
  <div class="row">
    <div class="col-4">Col-4</div>
    <div class="col-4 ms-auto">Col-4</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-4">Col-md-4</div>
    <div class="col-md-4 ms-md-auto">Col-md-4</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-4 me-auto">Col-4</div>
    <div class="col-4">Col-4</div>
  </div>
</div>

Standalone column classes #

The .col-* classes can also be used outside a .row to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.

<!-- Standalone column classes -->
<div class="col-3">25%</div>
<div class="col-6">50%</div>
<div class="col-9">75%</div>
<div class="col-12">100%</div>

The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a .clearfix helper to clear the float if the text is shorter.

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

<!-- Responsive floated image -->
<div class="clearfix">
  <img src="..." class="col-sm-6 float-sm-end mb-3 ms-sm-3 rounded" alt="...">
  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>
  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at.
  </p>
  <p class="mb-0">
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>