www/docs/layout/grid.mdx
import GridContainer from '!!raw-loader!../examples/Grid/Container'; import GridContainerFluid from '!!raw-loader!../examples/Grid/ContainerFluid'; import GridContainerFluidBreakpoint from '!!raw-loader!../examples/Grid/ContainerFluidBreakpoint'; import GridAutoLayout from '!!raw-loader!../examples/Grid/AutoLayout'; import GridRowColLayout from '!!raw-loader!../examples/Grid/RowColLayout'; import GridRowColLayoutColWidthBreakpoint from '!!raw-loader!../examples/Grid/RowColLayoutColWidthBreakpoint'; import GridAutoLayoutSizing from '!!raw-loader!../examples/Grid/AutoLayoutSizing'; import GridAutoLayoutVariable from '!!raw-loader!../examples/Grid/AutoLayoutVariable'; import GridOffsetting from '!!raw-loader!../examples/Grid/Offsetting'; import GridOrdering from '!!raw-loader!../examples/Grid/Ordering'; import GridOrderingFirstLast from '!!raw-loader!../examples/Grid/OrderingFirstLast'; import GridResponsive from '!!raw-loader!../examples/Grid/Responsive'; import GridResponsiveAuto from '!!raw-loader!../examples/Grid/ResponsiveAuto';
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.
Containers provide a means to center and horizontally pad your site’s
contents. Use Container for a responsive pixel width.
You can use <Container fluid /> for width: 100% across
all viewport and device sizes.
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.
When no column widths are specified the Col component will
render equal width columns
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.
<CodeBlock language="jsx" live previewClassName="grid-example"> {GridAutoLayoutSizing} </CodeBlock>Set the column value (for any breakpoint size) to auto to
size columns based on the natural width of their content.
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.
You can also mix and match breakpoints to create different grids depending on the screen size.
<CodeBlock language="jsx" live previewClassName="grid-example"> {GridResponsive} </CodeBlock>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.
The order property also supports first (order: -1) and last (order: $columns+1).
For offsetting grid columns you can set an offset value or for a
more general layout, use the margin class utilities.
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 overridden by <Row md={4} />
on medium and larger screens.