No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Columns

  • Columns build on the grid’s flexbox architecture which is based on Bootstrap. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.
  • When building grid layouts, all content goes in columns. The hierarchy of our grid goes from container to row to column to your content.

Use flexbox alignment utilities to vertically and horizontally align columns.

Change the vertical alignment with any of the responsive align-items-* classes.

Or, change the alignment of each column individually with any of the responsive align-self-* classes.

Item 1
Item 2
Item 3
<div class="container">
  <div class="row align-items-start">
    <div class="col">Item 1</div>
    <div class="col">Item 2</div>
    <div class="col">Item 3</div>
  </div>
</div>
NameDescriptionDefaultControl
Align Items
Aligns the whole row vertically.
string
-
Align Item 1
Aligns the Item 1 vertically.
string
-

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

Item 1
Item 2
NameDescriptionDefaultControl
Horizontal Alignement
Aligns the Items horizontally.
string
-

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9
col-4
.col-6
Subsequent columns continue along the new line.
NameDescriptionDefaultControl
Width of second Column
Set width for second column to see line breaking
string
-

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 .rows, but not every implementation method can account for this.

.col-3
.col-3
.col-3
.col-3
NameDescriptionDefaultControl
Render breaking element
Toggle rendering of breaking element
boolean
-

Use .order- 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 seven grid tiers. If you need more .order-* classes.

First in DOM
Second in DOM
Third in DOM
NameDescriptionDefaultControl
Order first column
Set order-class for first element
string
-
Order second column
Set order-class for second element
string
-
Order third column
Set order-class for third element
string
-

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.

First in DOM, ordered last
Second in DOM, unordered
Third in DOM, ordered first

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.

Move columns to the right using .offset-* classes. These classes increase the left margin of a column by * columns. For example, .offset-4 moves .col-1 over four columns. You can also apply the offset above a certain breakpoint with the breakpoint infixes e.g. offset-md-4.

.offset-1
NameDescriptionDefaultControl
Offset classes
Increases the left margin of a column
string
-

In addition to column clearing at responsive breakpoints, you may need to reset offsets.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

Resize the browser window to see changes.