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.

    Auto-layout columns

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

    1 of 2
    2 of 2
    1 of 3
    2 of 3
    3 of 3
    Press esc to disable tab trapping

    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.

    1 of 3
    2 of 3 (wider)
    3 of 3
    1 of 3
    2 of 3 (wider)
    3 of 3
    Press esc to disable tab trapping

    Variable width content

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

    1 of 3
    Variable width content
    3 of 3
    1 of 3
    Variable width content
    3 of 3
    Press esc to disable tab trapping

    Responsive grids

    The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, large, and xl). For every breakpoint, you can specify the amount of columns to span, or set the prop to <Col lg={true} /> for auto layout widths.

    sm=8
    sm=4
    sm=true
    sm=true
    sm=true
    Press esc to disable tab trapping

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

    xs=12 md=8
    xs=6 md=4
    xs=6 md=4
    xs=6 md=4
    xs=6 md=4
    xs=6
    xs=6
    Press esc to disable tab trapping

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

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

    First, but unordered
    Second, but last
    Third, but second
    Press esc to disable tab trapping

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

    md=4
    md={{ span: 4, offset: 4 }}
    md={{ span: 3, offset: 3 }}
    md={{ span: 3, offset: 3 }}
    md={{ span: 6, offset: 3 }}
    Press esc to disable tab trapping

    API

    import Container from 'react-bootstrap/Container'
    NameTypeDefaultDescription
    as
    elementType

    You can use a custom element for this component

    fluid
    boolean
    false

    Allow the Container to fill all of its available horizontal space.

    bsPrefix
    string
    'container'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Row from 'react-bootstrap/Row'
    NameTypeDefaultDescription
    as
    elementType

    You can use a custom element type for this component.

    noGutters
    boolean
    false

    Removes the gutter spacing between Cols as well as any added negative margins.

    bsPrefix
    string
    'row'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import Col from 'react-bootstrap/Col'
    NameTypeDefaultDescription
    as
    elementType

    You can use a custom element type for this component.

    lg
    true | "auto" | number | { span: true | "auto" | number, offset: number, order: number }

    The number of columns to span on large devices (≥992px)

    md
    true | "auto" | number | { span: true | "auto" | number, offset: number, order: number }

    The number of columns to span on medium devices (≥768px)

    sm
    true | "auto" | number | { span: true | "auto" | number, offset: number, order: number }

    The number of columns to span on small devices (≥576px)

    xl
    true | "auto" | number | { span: true | "auto" | number, offset: number, order: number }

    The number of columns to span on extra large devices (≥1200px)

    xs
    true | "auto" | number | { span: true | "auto" | number, offset: number, order: number }

    The number of columns to span on sxtra small devices (<576px)

    bsPrefix
    string
    'col'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.