Skip to main content

Layout grid

A grid consists of a framework of cells that helps users read and visually navigate website content more easily, using a column structure that is both responsive and scrollable.

Variations

Basics

Familiarity with the grid system will greatly improve your layouts' consistency and cohesiveness.

The system uses a series of containers, rows, and columns to lay out and align content.

  • Rows and columns must always be used together, and must be placed inside of a grid container.
  • Containers may also directly include content that does need need to be laid out in columns.
<div class="bolt-container">
  <p>
    Container content
  </p>
  <div class="bolt-row">
    <div class="bolt-col">
      Column content
    </div>
    <div class="bolt-col">
      Column content
    </div>
  </div>
</div>

Column widths are specified as a fraction out of 12. For example, .bolt-col-6 will span half of the width of the row.

Layouts can be applied consistently across all screen sizes, or can be set at specific breakpoints using responsive classes.

Grid breakpoints

Breakpoint Viewport width Max container width Class prefix
Baseline 0px+ None (auto) .bolt-col-
Extra small 360px+ None (auto) .bolt-col-xs-
Small 576px+ 540px .bolt-col-sm-
Medium 768px+ 720px .bolt-col-md-
Large 992px+ 960px .bolt-col-lg-
Extra large
(default max grid size)		 1200px+ 1140px .bolt-col-xl-
2X large
1444px+ 1380px .bolt-col-2xl-
3X large
1752px+ 1656px .bolt-col-3xl-

Grid basis

By default, the grid's maximum width is based on an XL breakpoint.

The following classes can be used to opt into additional 2XL or 3XL breakpoints:

  • bolt-grid--2xl
  • bolt-grid--3xl

This must be configured globally at the application level, like so:

<html class="bolt-typography bolt-grid--3xl">
  ...
</html>

Column sizing

Numbered width

Use numbered column classes to specify width, as a portion of 12 total units per row.

<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col-8">
      col-8
    </div>
    <div class="bolt-col-4">
      col-4
    </div>
  </div>
</div>

Equal width

Use bolt-col on all columns in a row to create equal width columns at all screen sizes.

<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col">
      col
    </div>
    <div class="bolt-col">
      col
    </div>
  </div>
  <div class="bolt-row">
    <div class="bolt-col">
      col
    </div>
    <div class="bolt-col">
      col
    </div>
    <div class="bolt-col">
      col
    </div>
  </div>
</div>

Create equal-width columns that span multiple rows by inserting a bolt-row-break class where you want the columns to break to a new line. Prior to 7.5.0, this class was documented as bolt-w-100. A non-breaking alias was added to provide a more intuitive class name.

<div class="bolt-row">
  <div class="bolt-col">col</div>
  <div class="bolt-col">col</div>
  <div class="bolt-row-break"></div>
  <div class="bolt-col">col</div>
  <div class="bolt-col">col</div>
</div>

When used alongside numbered-width columns, bolt-col will evenly divide the remaining space in the row.

<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col">
      col
    </div>
    <div class="bolt-col-6">
      col-6
    </div>
    <div class="bolt-col">
      col
    </div>
  </div>
  <div class="bolt-row">
    <div class="bolt-col">
      col
    </div>
    <div class="bolt-col-5">
      col-5
    </div>
    <div class="bolt-col">
      col
    </div>
  </div>
</div>

Content width

Use bolt-col-auto to size columns based on the width of their content.

<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col">
      col
    </div>
    <div class="bolt-col-auto">
      col-auto
    </div>
    <div class="bolt-col">
      col
    </div>
  </div>
</div>

Responsive classes

For building complex responsive layouts, classes can be scoped to a specific breakpoint.

When adding a breakpoint to a column class, it will be applied at that breakpoint and higher. For example, bolt-col-sm-4 will be applied at the small breakpoint and above.

Below the specified breakpoint, the column will span full-width, creating a stacked layout.

<div class="bolt-row">
  <div class="bolt-col-sm-8">col-sm-8</div>
  <div class="bolt-col-sm-4">col-sm-4</div>
</div>
<div class="bolt-row">
  <div class="bolt-col-sm">col-sm</div>
  <div class="bolt-col-sm">col-sm</div>
  <div class="bolt-col-sm">col-sm</div>
</div>

Columns can include multiple responsive classes, in order to create distinct layouts at various breakpoints.

<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col-md-4 bolt-col-xl-8">col-md-4<br/>col-xl-8</div>
    <div class="bolt-col-md-4 bolt-col-xl-2">col-md-4<br/>col-xl-2</div>
    <div class="bolt-col-md-4 bolt-col-xl-2">col-md-4<br/>col-xl-2</div>
  </div>
</div>

Positioning

Alignment

Bolt provides utility classes corresponding to various flexbox utilities for horizontal and vertical alignment.

<div class="bolt-container">
  <div class="bolt-row bolt-align-items-start bolt-docs--grid-example__valign">
    <div class="bolt-col">
      align-items-start
    </div>
    <div class="bolt-col">
      align-items-start
    </div>
    <div class="bolt-col">
      align-items-start
    </div>
  </div>
  <div class="bolt-row bolt-align-items-center bolt-docs--grid-example__valign">
    <div class="bolt-col">
      align-items-center
    </div>
    <div class="bolt-col">
      align-items-center
    </div>
    <div class="bolt-col">
      align-items-center
    </div>
  </div>
  <div class="bolt-row bolt-align-items-end bolt-docs--grid-example__valign">
    <div class="bolt-col">
      align-items-end
    </div>
    <div class="bolt-col">
      align-items-end
    </div>
    <div class="bolt-col">
      align-items-end
    </div>
  </div>
</div>
<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col bolt-align-self-start">
      align-self-start
    </div>
    <div class="bolt-col bolt-align-self-center">
      align-self-center
    </div>
    <div class="bolt-col bolt-align-self-end">
      align-self-end
    </div>
  </div>
</div>
Horizontal alignment
justify-start
justify-start
justify-center
justify-center
justify-end
justify-end
justify-around
justify-around
justify-between
justify-between 
<div class="bolt-container">
  <div class="bolt-row bolt-justify-content-start">
    <div class="bolt-col-4">
      One of two columns
    </div>
    <div class="bolt-col-4">
      One of two columns
    </div>
  </div>
  <div class="bolt-row bolt-justify-content-center">
    <div class="bolt-col-4">
      One of two columns
    </div>
    <div class="bolt-col-4">
      One of two columns
    </div>
  </div>
  <div class="bolt-row bolt-justify-content-end">
    <div class="bolt-col-4">
      One of two columns
    </div>
    <div class="bolt-col-4">
      One of two columns
    </div>
  </div>
  <div class="bolt-row bolt-justify-content-around">
    <div class="bolt-col-4">
      One of two columns
    </div>
    <div class="bolt-col-4">
      One of two columns
    </div>
  </div>
  <div class="bolt-row bolt-justify-content-between">
    <div class="bolt-col-4">
      One of two columns
    </div>
    <div class="bolt-col-4">
      One of two columns
    </div>
  </div>
</div>

Offset

Column offset classes increase the margin before a column by the given number of grid units.

For example, .bolt-offset-4 moves the column to the right by 4/12 of the row's width.

<div class="bolt-row">
  <div class="bolt-col-4">col-4</div>
  <div class="bolt-col-4 bolt-offset-4">col-4 offset-4</div>
</div>
<div class="bolt-row">
  <div class="bolt-col-6 bolt-offset-3">col-6 offset-3</div>
</div>

Nested layouts

A column can be further subdivided by nesting additional rows and columns inside it.

<div class="bolt-container">
  <div class="bolt-row">
    <div class="bolt-col">
      Level 1 column
    </div>
    <div class="bolt-col">
      Level 1 column
      <div class="bolt-row">
        <div class="bolt-col">
          Level 2 column
        </div>
        <div class="bolt-col">
          Level 2 column
        </div>
      </div>
    </div>
  </div>
</div>
 Code reference

Anatomy

Containers

  • Parent element of a grid layout
  • May contain one or more rows
  • May directly contain content
  • Should not include nested containers
    • A single parent container may contain multiple rows or direct content
  • Use one of the following classes:
    • bolt-container-fluid: has a width of 100%
    • bolt-container: centered with a fixed width for each responsive breakpoint

Rows

  • Must be used inside of a container
  • May only contain one or more columns
  • Use class: bolt-row

Columns

  • Must be used inside of a row
  • May directly contain content
  • May contain nested rows
    • e.g., further dividing a column
  • Use the following classes:
    • bolt-col: creates equal width columns at all breakpoints
    • bolt-col-[size]: creates column of a given size (based on 12 units per row)
    • bolt-col-auto: allows column width to be determined by its content
    • bolt-col-[breakpoint]-[size]: applies the specified column layout at a given breakpoint or higher

Additional utility classes

Application level

Row-level

  • Vertical alignment
    • bolt-align-items-start: aligns child columns to top
    • bolt-align-items-center: aligns child columns to vertical center
    • bolt-align-items-end: aligns child columns to bottom
  • Horizontal alignment
    • bolt-justify-content-start: aligns child columns to left
    • bolt-justify-content-center: aligns child columns to horizontal center
    • bolt-justify-content-end: aligns child columns to right

Column-level

  • Vertical alignment

    • bolt-align-self-start: aligns self to top of parent row
    • bolt-align-self-center: aligns self to vertical center of parent row
    • bolt-align-self-end: aligns self to bottom of parent row

  • Offset

    • bolt-offset-[size]: shifts the column to the right by the given number of grid units
 Accessibility

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.

Display settings

Note: not all settings persist across pages

Default Compact (-1) Sparse (+1) XL (default) 2XL 3XL Default Min Max Light (default) System Dark Branded (default) Unbranded