Skip to main content

Grid system

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

Container

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

Result
Loading...
Live Editor

Fluid Container

You can use <Container fluid /> for width: 100% across all viewport and device sizes.

Result
Loading...
Live Editor

You can set breakpoints for the fluid prop. Setting it to a breakpoint (sm, md, lg, xl, xxl) will set the Container as fluid until the specified breakpoint.

Result
Loading...
Live Editor

Auto-layout columns

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

Result
Loading...
Live Editor

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.

Result
Loading...
Live Editor

Variable width content

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

Result
Loading...
Live Editor

Responsive grids

The Col 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 to span, or set the prop to <Col lg={true} /> for auto layout widths.

Result
Loading...
Live Editor

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

Result
Loading...
Live Editor

The Col breakpoint props also have a more complicated object prop form: {span: number, order: number, offset: number} for specifying offsets and ordering effects.

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

Result
Loading...
Live Editor

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

Result
Loading...
Live Editor

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

Result
Loading...
Live Editor

Setting column widths in Row

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.

Result
Loading...
Live Editor

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 overridden by <Row md={4} /> on medium and larger screens.

Result
Loading...
Live Editor

API

Container

Row

Col