Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.

¶Alignment

The grid system's columns make us of the same alignment utilities available for flex item. You can align the content using the .align-items-{position}, .align-self-{position}, or .align-content-{position} for vertical alignment, or .justify-content-{position} for horizontal alignment.

¶Align items

Use the align-items utilities to vertically and horizontally align columns:

<div class="row align-items-start">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

¶Align self

Use the align-self utilities to vertically and horizontally align columns:

<div class="row">
    <div class="col align-self-end">col</div>
    <div class="col align-self-end">col</div>
    <div class="col align-self-end">col</div>
</div>

¶Align content

Use the align-content utilities to vertically and horizontally align columns:

<div class="row align-content-center g-5">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

¶Horizontal alignment

Use the align-content utilities to vertically and horizontally align columns:

<div class="row align-content-center g-5">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

¶Reordering

The grid system's columns make us of the same order utilities available for flex items.

¶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 (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers.

<div class="container">
    <div class="row">
        <div class="col">
            First in DOM, no order applied
        </div>
        <div class="col order-5">
            Second in DOM, with a larger order
        </div>
        <div class="col order-1">
            Third in DOM, with an order of 1
        </div>
    </div>
</div>

There are also responsive .order-first and .order-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.

<div class="container">
    <div class="row">
        <div class="col">
            First in DOM, no order applied
        </div>
        <div class="col order-last">
            Second in DOM, with a larger order
        </div>
        <div class="col order-first">
            Third in DOM, with an order of 1
        </div>
    </div>
</div>

¶Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

¶Using offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four 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 .offset-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    </div>
</div>

¶Using margin utilities

You can use margin utilities like .me-auto to force sibling columns away from one another.

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