Rows and columns

Create responsive layouts and align content using our grid system, comprising rows and columns.

Rows and columns are built using flexbox, meaning that our range of flexbox utilities can be used to modify their appearance.

Rows

Use .row to wrap column elements.

The space between columns (gutter) is created by horizontal padding on each column element, which rows offset to ensure that content within columns is aligned with regular content on the left and right sides.

<div class="row">
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
</div>

Use the .row-sm or .row-lg modifiers to create rows with less or more gutter space, respectively:

<div class="row row-sm">
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
</div>

<div class="row row-lg">
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
  <div class="col">
    One of three columns
  </div>
</div>

Columns

Fluid width

Use .col-{width} to create a column that spans a given number of columns out the default 12 per row. For example, three equal-width columns would use .col-4.

<div class="row">
  <div class="col-4">
    One of three columns
  </div>
  <div class="col-4">
    One of three columns
  </div>
  <div class="col-4">
    One of three columns
  </div>
</div>

Column widths are set in percentages, so they’re always fluid and sized relative to the parent row.

If more than 12 columns are placed within a single row, they will wrap onto a new line.

Use .{screen}:col-{width} to have a column occupy that width at a specific breakpoint and above.

For example, .md:col-6 will span 6 of 12 columns at only medium screen sizes and above:

Responsive columns
View code
e8fc5070b97ca682f1224afa06ca1fa91030c51aab93b8a00dd7a2fa2d9f04464017bb9b9119f3507e52565215a550088a2f84e88b0ad8dcfbb0f26217f6b03f2a5a8deb809debcd78fd74e85e9c06a29a1de500b92c40e55c207261ad3dc607671c5609e1516c4aac9b83e2e045f17dd2765f719e93ac8edaa5d8cf58629128a6515798c38813d5705a5363570b912e819afeddbc5960a7db60fa0a2d2520b81af796210e70c2a514d36b4e6c13a80999bf57b047ed882f03442baf61dad30d86aedb7aa0f3c8576746e2eaf1eda2f5bd6c4fc0fd100af1efafbe002ea779d057c11cecee5a94076696bb7dabeb323c3cc66c0a5eb4088afb222eacf6ad0908e638910feb576b9360fa4a43dd6ece9a021522171da4481b19d893783d3a7fce6282253a0940a551c3186170cc5025008d919ba7ecca66b1d5cb1db7c2bec246e4437e362c61e91bcfb85df92442d9665ae90a5afaf3f1fdd223a7691e68e5f44811f3e18532505eda60375e2bc2de54bf3abd69f9d3d30d03af978ce430396e369174c89f934b19941d6833299bfbe13b8247afac4640ec3f72d7c0e9db7686b29446a24054cd79e708ac9302ddd593b70993d74a6c828ada298b2fc6b16306dcdd3269f6fbb4adf68797dd35b3576b6e45ef91fc97c695d536256f4f8ff20a42cd7c5b4401a93f55cc75178b2fded9ccb80273807d041e05ffaf02296337246085c42ea46f1bd063454be8962beeb47090a9e8ede6f8689ca15462e4979d91028dcc3b686e10809297846f09f2a9b91783f50ae552c526ec8bec94ff29b9295a56755eb6ab0a46afba2aea097c7e0fe561f4b82d6a25e443c3830a1b2004b91d478a5a81eaf5e827d5804535539f8437cba2cbbe282db59844c4db014833fe6751e304598cc8335a384d4951a38ae70933aad23f1b09c5e90e0ee8e19943a633ec2c3ac45b350c315253561d541b92102fb36fc171fc5d2c7c5f7567f77c920181734d53f1db62df7ebc59e7af674918471671fc2f61951d96ffc62e1fba3843c3b64f36f78c741bfda63008f2355d21fd423fd6ed227456c3f34929452770bc47f1e6aabbcb32b75d1f14a18faf6f802ad98bc09d837d32106a2683b5ccb0779db4fd5d21ca9c5f5eff09193a9601faf488dabf0154945dfd0035137054462314a49bed6a0b459145f34c0452b65021603c15f4539c1d72eaca4ed47059abe053c4e16dbe02b93542ab575c7c5321e98c60eafe7ac3efd66ba0ea5dfe7e0cd63e4645eab02c3010c99e011c89360016319e4b0a64541d9194bded88511055bf6b3f3e364dd1470c2f424870228674939cf46beedce0afa4e858eb7edd8a20c48184a673a91db78f26dffb83b3837324bf9cbda8fbabe4f4e947ccbbacb47cff5a8e227987f9e1e802c8e3d787e501995b731d89cd06503d6f70bd390a23387bd20e0da9e07467b3eae0d366a309e803b53dcbecd4f650ddbf93a93e25e10561ecd7c13187f14e10b065cdf1eb84499d3e47dd99fbc5a57ee04f752adc546e9d618d35ca8712f2a52953fddc20bd956dbdbe14a1255a2b19fe2b4a48b236fb

Equal-width

Columns without a specified {width} will automatically layout as equal width columns:

<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

Equal-width columns can be broken into multiple lines using the .w-full utility.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-full"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Given flexbox behavior, you can set the width of one column and have the sibling columns automatically resize around it:

<div class="container">
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-6">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-5">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
</div>

Horizontal alignment

Use a justify-content utility to control the alignment of columns within a horizontal row.

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
</div>

Vertical alignment

Use an align-items utility to control the alignment of columns within a vertical row.

<div class="container">
  <div class="row align-items-start">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
  <div class="row align-items-center">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
  <div class="row align-items-end">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
</div>

Columns can be aligned independently of one another using an align-self utility.

<div class="container">
  <div class="row">
    <div class="col align-self-start">One of three columns</div>
    <div class="col align-self-center">One of three columns</div>
    <div class="col align-self-end">One of three columns</div>
  </div>
</div>

Reordering

Use .col-order-{position} to control the visual order of columns, where {position} is a value between 1 and 12 (the total number of columns).

<div class="row">
  <div class="col col-order-2">
    .col-order-2
  </div>
  <div class="col col-order-3">
    .col-order-3
  </div>
  <div class="col col-order-1">
   .col-order-1
  </div>
</div>

These classes are responsive, so you can set the visual order by breakpoint (e.g., .col-order-1.md:col-order-2).

Use .flex-first and .flex-last utilities to display a column at the start or end of a row, respectively:

<div class="row">
  <div class="col">
    First, but unordered
  </div>
  <div class="col flex-last">
    Second, but last
  </div>
  <div class="col flex-first">
    Third, but first
  </div>
</div>

Offsetting

Columns can be offset using responsive .offset-{number} classes, or 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.

Offset classes

Use .{screen:}offset-{number} classes to move columns to the right using.

For example, .md:offset-4 moves a given column to the right by four columns widths for medium screen sizes and above.

<div class="row">
  <div class="col-4 md:col-offset-2">
    .col-4.md:col-offset-2
  </div>
  <div class="col-4">
    .col-4
  </div>
</div>

Margin utilities

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

<div class="row">
  <div class="col-4 mr-auto">
    .col-4.mr-auto
  </div>
  <div class="col-4">
    .col-4
  </div>
</div>

Nesting

Add a new .row and set of .sm:col-* columns within an existing .sm:col-* column to create a nested row.

Customizing

When using the source Sass files, you can customize the number of columns and column gap:

$column-number: 12;
$column-gap:    2rem;
$column-gap-sm: 1.5rem;
$column-gap-lg: 3rem;

Questions or feedback about this article? Let us know