Grid

Container

Auto-layout columns

Containers provide a means to center and horizontally pad your site’s contents. Use Container for a responsive pixel width.

When no column widths are specified the Col component will render equal width columns.

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

Variable width content

Set the column value (for any breakpoint size) to "auto" to size columns based on the natural width of their content.

Responsive grids

The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify the amount of columns to span, or set auto layout widths.

1 of 2

1 of 3

2 of 3

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

3 of 3

Variable width content

1 of 3

3 of 3

Variable width content

sm=8

sm=4

sm=true

xs=12 md=8

xs=6 md=4

You can also mix and match breakpoints to create different grids depending on the screen size.

xs=6 md=4

xs=6

First, but unordered

Second, but last

Third, but second

You can use the order property to control the visual order of your content.

Third, but first

Second, but unordered

First, but last

The order property also supports first (order: -1) and last (order: $columns+1).

md=4

md={{ span: 4, offset: 4 }}

md={{ span: 3, offset: 3 }}

md={{ span: 6, offset: 3 }}

md={{ span: 3, offset: 3 }}

For offsetting grid columns you can set an offset value or for a more general layout, use the margin class utilities.

Setting column widths in Row

1 of 2

1 of 3

2 of 3

3 of 3

1 of 3

2 of 3

3 of 3

1 of 3

2 of 3

3 of 3

The Row lets you specify column widths across 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can specify the amount of columns that will fit next to each other. You can also specify auto to set the columns to their natural widths.

Note that Row column widths will override Col widths set on lower breakpoints when viewed on larger screens. The <Col xs={6} /> size will be overriden by <Row md={4} /> on medium and larger screens.

Grid

Use Tips

1. Open Create Guides.. In tool panel.

2. Create a guide for the design system or a custom guide.

3. Delete unused guide lines.

Grid

Alerts

Accordion

Badges

Breadcrumbs

Buttons

Button groups

Cards

Carousels

Dropdowns

Figures

Forms

InputGroup

Images

Jumbotron

List groups

Modals

Nav

Navbars

Offcanvas

Overlays

Pagination

Placeholder

Progress bars

Spinners

Tables

Tabs

Toasts

Transitions

Layout

Components

Media

Stacks

Download

React-Bootstrap

Utilities

Templates