You can create a responsive grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row.
<Container debug>
<Row>
<Col>Col auto</Col>
</Row>
<Row>
<Col sm={4} md={4} lg={6}>
sm-4 md-4 lg-6
</Col>
<Col sm={4} md={8} lg={6}>
sm-4 md-8 lg-6
</Col>
</Row>
<Row>
<Col sm={2} md={3} lg={4}>
sm-2 md-3 lg-4
</Col>
<Col sm={2} md={3} lg={2}>
sm-2 md-3 lg-2
</Col>
<Col sm={2} md={3} lg={4}>
sm-2 md-3 lg-4
</Col>
<Col sm={2} md={3} lg={2}>
sm-2 md-3 lg-2
</Col>
</Row>
</Container>
<Container debug>
<Row>
{Array.from(Array(12), (v, i) => {
return (
<Col key={i} offset={{ lg: 11 - i }} lg={i + 1}>
<br />
</Col>
)
})}
</Row>
</Container>
Align and justify working with flexbox and both accept a string or object.
Props accepted: baseline | center | flex-start | flex-end | stretch.
<Container debug>
<Row align="flex-start">
<Col sm={4} md={6} style={{ height: '100px' }}>
start
</Col>
<Col sm={4} md={6}>
start
</Col>
</Row>
<br />
<Row align={{ lg: 'flex-end', xl: 'center' }}>
<Col sm={4} md={6}>
lg-end xl-center
</Col>
<Col sm={4} md={6} style={{ height: '100px' }}>
lg-end xl-center
</Col>
</Row>
<br />
<Row align={{ lg: 'center', xl: 'flex-end' }}>
<Col sm={4} md={6} style={{ height: '100px' }}>
lg-center xl-end
</Col>
<Col sm={4} md={6}>
lg-center xl-end
</Col>
</Row>
</Container>
Props accepted: center | flex-end | flex-start | space-around | space-between.
<Container debug>
<Row justify="space-around">
<Col md={3} lg={3}>
space around
</Col>
<Col md={3} lg={3}>
space around
</Col>
<Col md={3} lg={3}>
space around
</Col>
</Row>
<br />
<Row justify={{ lg: 'flex-end', xl: 'center' }}>
<Col md={3} lg={3}>
lg-end xl-center
</Col>
<Col md={3} lg={3}>
lg-end xl-center
</Col>
<Col md={3} lg={3}>
lg-end xl-center
</Col>
</Row>
<br />
<Row justify={{ lg: 'flex-start', xl: 'space-between' }}>
<Col md={3} lg={3}>
lg start xl-between
</Col>
<Col md={3} lg={3}>
lg start xl-between
</Col>
<Col md={3} lg={3}>
lg start xl-between
</Col>
</Row>
</Container>
Receives a boolean or array, if you pass just the boolean all breakpoints will be reversed.
<Container debug>
<Row reverse>
<Col sm={2} lg={4}>
Col-sm-2 Col-lg-4
</Col>
</Row>
<Row reverse={['md', 'lg']}>
<Col sm={2} lg={4}>
Col-sm-2 Col-lg-4
</Col>
</Row>
</Container>
To nest your content with the default grid, add a new <Row> and set of Columns(Col).
<Container debug>
<Row>
<Col sm={8} lg={12}>
Col-sm-8 Col-lg-12
<Row>
<Col sm={4} lg={6}>
Col-sm-4 Col-lg-6
</Col>
<Col sm={4} lg={6}>
Col-sm-4 Col-lg-6
</Col>
</Row>
</Col>
</Row>
</Container>
Remove gutters from columns
<Container debug>
<Row noGutters>
<Col sm={4} md={4} lg={6}>
sm-4 md-4 lg-6
</Col>
<Col sm={4} md={8} lg={6}>
sm-4 md-8 lg-6
</Col>
</Row>
<Row noGutters>
<Col sm={2} md={3} lg={4}>
sm-2 md-3 lg-4
</Col>
<Col sm={2} md={3} lg={2}>
sm-2 md-3 lg-2
</Col>
<Col sm={2} md={3} lg={4}>
sm-2 md-3 lg-4
</Col>
<Col sm={2} md={3} lg={2}>
sm-2 md-3 lg-2
</Col>
</Row>
</Container>