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.

    1 of 1

    Fluid Container

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

    1 of 1

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

    1 of 1

    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, lg, 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 effects.

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

    First, but unordered
    Second, but last
    Third, but second

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

    First, but last
    Second, but unordered
    Third, but first

    For offsetting grid columns you can set an offset value or for a 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 }}

    Setting column widths in Row

    The Row 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 that will fit next to each other.

    1 of 2
    2 of 2
    1 of 3
    2 of 3
    3 of 3

    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.

    1 of 3
    2 of 3
    3 of 3

    API

    Containerview source file

    import Container from 'react-bootstrap/Container'Copy import code for the Container component
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element for this component

    fluid
    true | "sm" | "md" | "lg" | "xl"
    		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
    		<div>

    You can use a custom element type for this component.

    lg
    number | { cols: number }

    The number of columns that will fit next to each other on large devices (≥992px)

    md
    number | { cols: number }

    The number of columns that will fit next to each other on medium devices (≥768px)

    noGutters
    boolean
    		false

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

    sm
    number | { cols: number }

    The number of columns that will fit next to each other on small devices (≥576px)

    xl
    number | { cols: number }

    The number of columns that will fit next to each other on extra large devices (≥1200px)

    xs
    number | { cols: number }

    The number of columns that will fit next to each other on extra small devices (<576px)

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

    You can use a custom element type for this component.

    lg
    boolean | "auto" | number | { span: boolean | "auto" | number, offset: number, order: "first" | "last" | number }

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

    md
    boolean | "auto" | number | { span: boolean | "auto" | number, offset: number, order: "first" | "last" | number }

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

    sm
    boolean | "auto" | number | { span: boolean | "auto" | number, offset: number, order: "first" | "last" | number }

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

    xl
    boolean | "auto" | number | { span: boolean | "auto" | number, offset: number, order: "first" | "last" | number }

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

    xs
    boolean | "auto" | number | { span: boolean | "auto" | number, offset: number, order: "first" | "last" | 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.