How to Use React Bootstrap to Implement Grid Layout
- React Bootstrap - Grid System
-
React Bootstrap
<Container>
Component -
React Bootstrap
<Row>
Component -
React Bootstrap
<Col>
Component
![How to Use React Bootstrap to Implement Grid Layout](/img/React/feature-image---react-bootstrap-grid.webp)
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.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn