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
    <Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>;
    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
    <Container>
  <Row>
    <Col>1 of 3</Col>
    <Col xs={6}>2 of 3 (wider)</Col>
    <Col>3 of 3</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col xs={5}>2 of 3 (wider)</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>;
    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
    <Container>
  <Row className="justify-content-md-center">
    <Col xs lg="2">
      1 of 3
    </Col>
    <Col md="auto">Variable width content</Col>
    <Col xs lg="2">
      3 of 3
    </Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col md="auto">Variable width content</Col>
    <Col xs lg="2">
      3 of 3
    </Col>
  </Row>
</Container>;
    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
    <Container>
  <Row>
    <Col sm={8}>sm=8</Col>
    <Col sm={4}>sm=4</Col>
  </Row>
  <Row>
    <Col sm>sm=true</Col>
    <Col sm>sm=true</Col>
    <Col sm>sm=true</Col>
  </Row>
</Container>;
    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
    <Container>
  {/* Stack the columns on mobile by making one full-width and the other half-width */}
  <Row>
    <Col xs={12} md={8}>
      xs=12 md=8
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
  </Row>

  {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
  <Row>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
  </Row>

  {/* Columns are always 50% wide, on mobile and desktop */}
  <Row>
    <Col xs={6}>xs=6</Col>
    <Col xs={6}>xs=6</Col>
  </Row>
</Container>;
    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
    <Container>
  <Row>
    <Col xs>First, but unordered</Col>
    <Col xs={{ order: 12 }}>Second, but last</Col>
    <Col xs={{ order: 1 }}>Third, but second</Col>
  </Row>
</Container>;
    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 }}
    <Container>
  <Row>
    <Col md={4}>md=4</Col>
    <Col md={{ span: 4, offset: 4 }}>{`md={{ span: 4, offset: 4 }}`}</Col>
  </Row>
  <Row>
    <Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
    <Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
  </Row>
  <Row>
    <Col md={{ span: 6, offset: 3 }}>{`md={{ span: 6, offset: 3 }}`}</Col>
  </Row>
</Container>;
    Press esc to disable tab trapping

    API

    Containerview source file

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

    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'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    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 required
    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'
    NameTypeDefaultDescription
    as
    elementType
    		<div>

    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.