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, xxl) 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 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.

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

    1 of 2
    2 of 2
    1 of 3
    2 of 3
    3 of 3
    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

    Container

    import Container from 'react-bootstrap/Container'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element for this component

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

    Row

    import Row from 'react-bootstrap/Row'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    lg
    number | 'auto' | { cols: number | 'auto' }

    The number of columns that will fit next to each other on large devices (≥992px). Use auto to give columns their natural widths.

    md
    number | 'auto' | { cols: number | 'auto' }

    The number of columns that will fit next to each other on medium devices (≥768px). Use auto to give columns their natural widths.

    sm
    number | 'auto' | { cols: number | 'auto' }

    The number of columns that will fit next to each other on small devices (≥576px). Use auto to give columns their natural widths.

    xl
    number | 'auto' | { cols: number | 'auto' }

    The number of columns that will fit next to each other on extra large devices (≥1200px). Use auto to give columns their natural widths.

    xs
    number | 'auto' | { cols: number | 'auto' }

    The number of columns that will fit next to each other on extra small devices (<576px). Use auto to give columns their natural widths.

    xxl
    number | 'auto' | { cols: number | 'auto' }

    The number of columns that will fit next to each other on extra extra large devices (≥1400px). Use auto to give columns their natural widths.

    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.

    Col

    import Col from 'react-bootstrap/Col'
    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)

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

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

    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.