Grid Options
Bootstrap grid system allows all six breakpoints, and any breakpoints you can customize.
| Extra small < 576px | Small ≥ 576px | Medium ≥ 768px | Large ≥ 992px | Extra large ≥ 1200px | Extra extra large ≥ 1400px | |
|---|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| React-Bootstrap Col Props | <Col xs={...}> | <Col sm={...}> | <Col md={...}> | <Col lg={...}> | <Col xl={...}> | <Col xxl={...}> |
| # of columns | 12 (use span={1-12}) | |||||
| Gutter width | Controlled via Row (g-0 to g-5) | |||||
| Nestable | Yes (Row inside Col) | |||||
| Offsets | Use offset props (e.g., md={{ span: 6, offset: 3 }}) | |||||
| Column ordering | Use order prop (e.g., md={{ order: 2 }}) | |||||
Grid For Column
<Col md={6} /><Col md={6} /><Col md={7} /><Col md={5} /><Col md={8} /><Col md={4} /><Col md={9} /><Col md={3} /><Col md={10} /><Col md={2} /><Col md={11} /><Col md={1} /><Col md={12} />Equal-width
<Col xs={6} /><Col xs={6} /><Col xs={4} /><Col xs={4} /><Col xs={4} />Setting one column width
<Col /><Col xs={6} /><Col /><Col /><Col xs={5} /><Col />Variable width content
<Col lg={4} /><Col md="auto" /><Col lg={4} /><Col /><Col md="auto" /><Col lg={2} />All breakpoints
<Col /><Col /><Col /><Col /><Col xs={8} /><Col xs={4} />Stacked to horizontal
<Col sm={8} /><Col sm={4} /><Col sm /><Col sm /><Col sm />Mix and match
<Col sm={8} /><Col xs={6} md={4} /><Col xs={6} md={4} /><Col xs={6} md={4} /><Col xs={6} md={4} /><Col xs={6} /><Col xs={6} />Nesting
<Col sm={3} /><Col sm={9} />Horizontal alignment
<Col xs={4} /><Col xs={4} /><Col xs={4} /><Col xs={4} /><Col xs={4} /><Col xs={4} />Vertical alignment
<Col className="align-self-start" /><Col className="align-self-center" /><Col className="align-self-end" />Offset classes
<Col md={4} /><Col md={4} className="offset-md-4" /><Col md={3} className="offset-md-3" /><Col md={3} className="offset-md-3" /><Col md={6} className="offset-md-3" />Margin utilities
<Col md={4} /><Col md={4} className="ms-auto" /><Col md={3} className="ms-md-auto" /><Col md={3} className="ms-md-auto" /><Col xs="auto" className="me-auto" /><Col xs="auto" />