How to Use React Bootstrap to Implement Grid Layout

1. React Bootstrap - Grid System
2. React Bootstrap <Container> Component
3. React Bootstrap <Row> Component
4. React Bootstrap <Col> Component

React is one of the most popular front-end libraries for building user interfaces. It uses the concept of reusable components to build fast, beautiful applications in a short amount of time.

Still, sometimes building a custom component might take a lot of time.

You can speed up the process by reusing components written by other people. Some libraries contain components for inputs, buttons, and other common elements for building modern web applications.

React Bootstrap - Grid System

This article will discuss a grid layout system available in React Bootstrap. If you’re familiar with the Grid system in regular Bootstrap, you should be able to easily figure it out in React Bootstrap.

Developers can contain custom components for containers, rows, and columns. They can use it to easily organize the content layout on the page.

Under the hood, React Bootstrap relies on Flexbox to do this.

React Bootstrap <Container> Component

The <Container> custom component is useful in centering and padding your content. React Bootstrap API allows you to specify a width for the container.

Here is the example of website contents wrapped in a <Container> component.

import Container from 'react-bootstrap/Container';

export default function App() {
  return (
    <Container fluid>
      <h1>Container Sample</h1>
    </Container>
  );
}

The fluid attribute can keep 100% width regardless of screen size.

It is also possible to specify one of the breakpoints (sm, md, lg, xl, xxl) to set the value of the fluid attribute. If set, the container will remain fluid until the user screen size reaches this breakpoint.

The <Container> component is useful as a stand-alone. It provides padding and can be used to center content.

However, it is more useful when combined with <Row> and <Col> custom components.

React Bootstrap <Row> Component

This component allows you to horizontally organize the content. Each <Row> component typically contains multiple columns.

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col>Second Column</Col>
        </Row>
      </Container>
    </div>
  );
}

React Bootstrap <Col> Component

Finally, you can use <Col> custom components to divide rows horizontally. If the <Row> component contains two <Col> without any attributes, these two components will take up all free space between them.

You can use the xs attribute to specify the width of one of the columns. Let’s take a look at the example.

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function App() {
  const redBorder = { border: "1px solid red" };
  return (
    <div>
      <Container style={redBorder}>
        <Row>
          <Col>First Column</Col>
          <Col xs={6}>Second Column</Col>
          <Col>Third Column</Col>
        </Row>
      </Container>
    </div>
  );
}

In this case, the second column would be wider than the other two, dividing the free space left by the second column.