Skip to main content

Grid (+Babel)

How Grid Works?#

React#

  • Containers center and horizontally pad your content. Use <Container /> for a responsive pixel width, <Container fluid /> for width: 100% across all viewports and devices, or a responsive container (e.g., <Container breakpoint="md" />) for a combination of fluid and pixel widths.

  • Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column indicate the number of template columns to span (e.g., <Col xl={2} lg={2} md={4} sm={6} xs={12} xss={12}></Col> spans four). widths are set in percentages so you always have the same relative sizing.

  • Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with <Col gutterX={2} />, vertical gutters with <Col gutterY={2} />, or all gutters with <Col gutter={2} />. <Col gutter={0} /> is also available to remove gutters.

Babel#

  • Containers center and horizontally pad your content. Use class="container" for a responsive pixel width, class="container-fluid" for width: 100% across all viewports and devices, or a responsive container (e.g., class="container-md") for a combination of fluid and pixel widths.

  • Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column indicate the number of template columns to span (e.g., class="xl-2 lg-2 md-4 sm-6 xs-12 xss-12" spans four). widths are set in percentages so you always have the same relative sizing.

  • Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with class="gx-2", vertical gutters with class="gy-2", or all gutters with class="g-2". class="g-0" is also available to remove gutters.

col-lg-4
col-lg-2
col-lg-4
col-lg-2
col-lg-4 gx-2
col-lg-4 gx-2
col-lg-4 gx-2
// React Components
<Container fluid>
<Row>
<Col lg={4} md={6} xl={3} sm={12}>
<div>col-lg-4</div>
</Col>
<Col lg={2} md={4} xl={3} sm={12}>
<div>col-lg-2</div>
</Col>
<Col lg={4} md={6} xl={3} sm={12}>
<div>col-lg-4</div>
</Col>
<Col lg={2} md={4} xl={3} sm={12}>
<div>col-lg-2</div>
</Col>
</Row>
<Row>
<Col lg={4} md={6} xl={3} sm={12} gutterX={2}>
<div>col-lg-4 gx-2</div>
</Col>
<Col lg={4} md={6} xl={3} sm={12} gutterX={2}>
<div>col-lg-4 gx-2</div>
</Col>
<Col lg={4} md={6} xl={3} sm={12} gutterX={2}>
<div>col-lg-4 gx-2</div>
</Col>
</Row>
</Container>
// Babel
<div class="container-fluid">
<div class="row">
<div class="col-lg-4"><div>col-lg-4</div></div>
<div class="col-lg-2"><div>col-lg-2</div></div>
<div class="col-lg-4"><div>col-lg-4</div></div>
<div class="col-lg-2"><div>col-lg-2</div></div>
</div>
<div class="row">
<div class="col-lg-4 gx-2"><div>col-lg-4 gx-2</div></div>
<div class="col-lg-4 gx-2"><div>col-lg-4 gx-2</div></div>
<div class="col-lg-4 gx-2"><div>col-lg-4 gx-2</div></div>
</div>
</div>