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

    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

    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

    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

    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

    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

    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 }}

    API

    Containerview source file

    import Container from 'react-bootstrap/Container'Copy import code for the Container component
    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.

    Rowview source file

    import Row from 'react-bootstrap/Row'Copy import code for the Row component
    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.

    Colview source file

    import Col from 'react-bootstrap/Col'Copy import code for the Col component
    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 extra 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.