React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap’s grid system to create layouts.

Responsive Grids with Multiple Breakpoints

We can make React Bootstrap watch for multiple breakpoints and size the columns accordingly.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs={12} md={8}>
            foo
          </Col>
          <Col xs={6} md={4}>
            bar
          </Col>
        </Row>
        <Row>
          <Col xs={6} md={4}>
            foo
          </Col>
          <Col xs={6} md={4}>
            bar
          </Col>
          <Col xs={6} md={4}>
            baz
          </Col>
        </Row>
        <Row>
          <Col xs={6}>foo</Col>
          <Col xs={6}>bar</Col>
        </Row>
      </Container>
    </>
  );
}

to size the columns to different sizes.

We have the xs and md breakpoints to size them the way we like.

For example, xs={12} md={8} means the column will take up all 12 columns of the grid when the xs or extra small breakpoint is hit.

If the md or medium breakpoint is hit, then the column will be 8 columns wide.

Order and Offset

In addition to the breakpoint props, we can also pass in an object with theorder and offset properties.

order specifies the visual order from left to right.

offset is the number of columns to move a column to the right.

For instance, we can write:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col xs>1</Col>
          <Col xs={{ order: 12 }}>2</Col>
          <Col xs={{ order: 1 }}>3</Col>
        </Row>
      </Container>
    </>
  );
}

to order our columns.

The ones with the lower number is to the left and the ones with higher numbers are to the right.

So the column with the 2 is to the right of the one with the 3 since the first one has a higher order number than the other one.

We can also write first for the leftmost one and the last for the rightmost one.

#technology #programming #javascript #web-development #software-development #react