React Bootstrap — Grid Layout

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.

For example, 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={{ order: "last" }}>1</Col>
          <Col xs>2</Col>
          <Col xs={{ order: "first" }}>3</Col>
        </Row>
      </Container>
    </>
  );
}

We see that 3 and 1 are flipped even though the column with 1 is defined first.

This is because of the order property.

We can also add the offset property to move a column to the right by the given number of columns.

For example, 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={4}>foo</Col>
          <Col xs={{ span: 4, offset: 4 }}>bar</Col>
        </Row>
        <Row>
          <Col xs={{ span: 3, offset: 3 }}>foo</Col>
          <Col xs={{ span: 3, offset: 3 }}>bar</Col>
        </Row>
        <Row>
          <Col xs={{ span: 6, offset: 3 }}>foo</Col>
        </Row>
      </Container>
    </>
  );
}

Then move the columns around according to the span and offset .

span is the number of columns that are spanned from 1 to 12.

offset is the number of columns to move to the right relative to the neighboring column.

Setting Column Widths in Row

We can set the width of all the columns inside it within the Row component.

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 xs={2} md={4} lg={6}>
          <Col>foo</Col>
          <Col>bar</Col>
        </Row>
        <Row xs={1} md={2}>
          <Col>foo</Col>
          <Col>bar</Col>
          <Col>baz</Col>
        </Row>
      </Container>
    </>
  );
}

And we set the sizes for all the columns in the row.

So in the first row, if the screen is extra small, then the size is 2.

If the size is medium, then the size is 4.

And if the size is large, then the size is 6.

Conclusion

We can size columns and move with various props and values.

They can be ordered and spaced out according to offsets.