React Bootstrap — The Grid

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.

Grid System

Bootstrap’s grid system has a series of containers, rows, and columns to let us layout and align content.

It’s built with flexbox and it’s responsive.

Container

We can add a Container compoennt to contain our rows and 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>hello world</Col>
        </Row>
      </Container>
    </>
  );
}

to add our container, row, or column.

Fluid Container

We can add the fluid prop to the Container to make the container 100% across all viewport and device sizes.

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 fluid>
        <Row>
          <Col>hello world</Col>
        </Row>
      </Container>
    </>
  );
}

Ir also takes a value, we can write sm , md , lg , or xl .

This will make the container fluid until the given breakpoint.

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 fluid="md">
        <Row>
          <Col>hello world</Col>
        </Row>
      </Container>
    </>
  );
}

Auto-Layout Columns

We can add multiple rows and columns and they’ll be automatically sized.

Columns will be sized to equal widths.

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>1 </Col>
          <Col>2 </Col>
        </Row>
        <Row>
          <Col>3</Col>
          <Col>4</Col>
          <Col>5</Col>
        </Row>
      </Container>
    </>
  );
}

And we’ll see the first row with 2 equal-sized columns and the 2nd with 3 equal-sized ones.

We can also change the size of some columns.

For instance, we can use the xs prop to change the size of a column if the screen is extra small.

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={6}>1 </Col>
          <Col>2 </Col>
        </Row>
        <Row>
          <Col>3</Col>
          <Col>4</Col>
          <Col xs={6}>5</Col>
        </Row>
      </Container>
    </>
  );
}

The other breakpoints can also be used as props for the same purpose.

We can also auto-size some columns and specify the widths for others.

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 lg="1">
            1
          </Col>
          <Col md="auto">Variable width</Col>
          <Col xs lg="3">
            2
          </Col>
        </Row>
        <Row>
          <Col>3</Col>
          <Col md="auto">Variable width</Col>
          <Col xs lg="3">
            4
          </Col>
        </Row>
      </Container>
    </>
  );
}

Then left and right columns are fixed sized.

And the middle ones are automatically sized when the specified breakpoint in the prop names are hit.

Responsive Grids

We can make the column responsive by setting the breakpoint props with which breakpoints to show.

For instance sm={true} means the column will show if the sm breakpoint is hit.

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 sm={5}>foo</Col>
          <Col sm={7}>bar</Col>
        </Row>
        <Row>
          <Col sm>foo</Col>
          <Col sm>bar</Col>
          <Col sm>baz</Col>
        </Row>
      </Container>
    </>
  );
}

And the columns will be resized if the sm breakpoint is hit.

Conclusion

With the React Bootstrap Container , Row , and Col components, we can make layouts easily.

It’s responsive and automatically sized. This is made possible with flexbox.

With these components, we can make any layout we like without much trouble.

We can size columns according to various breakpoints we want to watch for.