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.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
return (
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerExample;
Fluid Container
You can use <Container fluid /> for width: 100% across
all viewport and device sizes.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidExample() {
return (
<Container fluid>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerFluidExample;
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.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerFluidBreakpointExample() {
return (
<Container fluid="md">
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerFluidBreakpointExample;
Auto-layout columns
When no column widths are specified the Col component will
render equal width columns
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutExample() {
return (
<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>
);
}
export default AutoLayoutExample;
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.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutSizingExample() {
return (
<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>
);
}
export default AutoLayoutSizingExample;
Variable width content
Set the column value (for any breakpoint size) to auto to
size columns based on the natural width of their content.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function AutoLayoutVariableExample() {
return (
<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>
);
}
export default AutoLayoutVariableExample;
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.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ResponsiveAutoExample() {
return (
<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>
);
}
export default ResponsiveAutoExample;
You can also mix and match breakpoints to create different grids
depending on the screen size.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ResponsiveExample() {
return (
<Container>
{}
<Row>
<Col xs={12} md={8}>
xs=12 md=8
</Col>
<Col xs={6} md={4}>
xs=6 md=4
</Col>
</Row>
{}
<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>
{}
<Row>
<Col xs={6}>xs=6</Col>
<Col xs={6}>xs=6</Col>
</Row>
</Container>
);
}
export default ResponsiveExample;
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.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OrderingExample() {
return (
<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>
);
}
export default OrderingExample;
The order property also supports first (order: -1) and last (order: $columns+1).
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OrderingFirstLastExample() {
return (
<Container>
<Row>
<Col xs={{ order: 'last' }}>First, but last</Col>
<Col xs>Second, but unordered</Col>
<Col xs={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>
);
}
export default OrderingFirstLastExample;
For offsetting grid columns you can set an offset value or for a
more general layout, use the margin class utilities.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function OffsettingExample() {
return (
<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>
);
}
export default OffsettingExample;
Setting column widths in Row
The Row 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 that will fit next to each other. You can
also specify auto to set the columns to their natural
widths.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function RowColLayoutExample() {
return (
<Container>
<Row xs={2} md={4} lg={6}>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
<Row xs={1} md={2}>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row xs="auto">
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default RowColLayoutExample;
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 overridden by <Row md={4} />
on medium and larger screens.
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function RowColLayoutColWidthBreakpointExample() {
return (
<Container>
<Row md={4}>
<Col>1 of 3</Col>
<Col xs={6}>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
</Container>
);
}
export default RowColLayoutColWidthBreakpointExample;
API
Container
Row
Col