React-Bootstrap Container, Row and Col Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. It provides React UI component with predefined styles. We can use the following approach in ReactJS to use the react-bootstrap Container, Row, and Col Component.

Container

Component provides a way to center and horizontally pad the contents of our application. It is used when the user wants the responsive pixel width. It acts as the outermost wrapper for rows and columns, helping to align and center the content on the page.

Syntax:

<Container>
    <p>This is inside a Bootstrap Container.</p>
</Container>

Props:

• as: It can be used as a custom element type for this component.
• fluid: It is used to allow the container to fill all of its horizontal space which is available.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Row

Row component provides a way to represent a row in the grid system. It is used when we want to display data in the form of rows. Rows are essential for creating structured layouts with multiple columns.

Syntax:

<Container>
    <Row>
        <p>This row will contain columns.</p>
    </Row>
</Container>

Props:

• as: It can be used as a custom element type for this component.
• lg: It is used to denote the number of columns which will fit next to each other on large devices having resolution ≥ 992 pixels.
• md: It is used to denote the number of columns which will fit next to each other on medium devices having resolution ≥ 768 pixels.
• sm: It is used to denote the number of columns which will fit next to each other on small devices having resolution ≥ 576 pixels.
• xl: It is used to denote the number of columns which will fit next to each other on extra-large devices having resolution ≥ 1200 pixels.
• xs: It is used to denote the number of columns which will fit next to each other on extra-small devices having resolution < 576 pixels.
• noGutters: It is used to remove the gutter spacing between added negative margins and columns.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Col

Col Component provides a way to represent a column in the grid system. It is used when we want to display data in the form of columns. The width of each column can be specified as a proportion of the 12 available grid spaces.

Syntax:

<Container>
    <Row>
        <Col xs={12} md={8}>
            Column 1
        </Col>
        <Col xs={6} md={4}>
            Column 2
        </Col>
    </Row>
</Container>

Props:

• as: It can be used as a custom element type for this component.
• lg: It is used to denote the number of columns to span on large devices having resolution ≥ 992 pixels.
• md: It is used to denote the number of columns to span on medium devices having resolution ≥ 768 pixels.
• sm: It is used to denote the number of columns to span on small devices having resolution ≥ 576 pixels.
• xl: It is used to denote the number of columns to span on extra-large devices having resolution ≥ 1200 pixels.
• xs: It is used to denote the number of columns to span on extra-small devices having resolution < 576 pixels.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

Steps to Create React App and Install React-Bootstap

React-Bootstrap provides convenient components for building responsive layouts.

Step 1: Initialize React App

Create a React application using the following command:

npx create-react-app foldername

Step 2: Switch to the Project Directory

After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: Install Bootstrap as Dependency

After creating the ReactJS application, Install the required module using the following command:

npm install react-bootstrap 
npm install bootstrap

Project Structure:

It will look like the following.

The updated dependencies in the package.json file are:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.3",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.4",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example 1: This example implements the container component from react-bootstrap.

// Filename - App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Container from "react-bootstrap/Container";

export default function App() {
	return (
		<div style={{ display: "block", width: 700, padding: 30 }}>
			<h4>React-Bootstrap Container Component</h4>
			<Container
				style={{
					backgroundColor: "green"
				}}
			>
				<h3>Sample Text, Greetings from GeeksforGeeks</h3>
			</Container>
		</div>
	);
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: This example implements the Row component from react-bootstrap inside container.

// Filename - App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Row from "react-bootstrap/Row";

export default function App() {
	return (
		<div style={{ display: "block", width: 700, padding: 30 }}>
			<h4>React-Bootstrap Row Component</h4>
			<Row
				style={{
					backgroundColor: "red"
				}}
			>
				Sample First Row
			</Row>
			<Row
				style={{
					backgroundColor: "yellow"
				}}
			>
				Sample Second Row
			</Row>
			<Row
				style={{
					backgroundColor: "green"
				}}
			>
				Sample Third Row
			</Row>
		</div>
	);
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 3: This example implements the Col component from react-bootstrap inside row and container.

// Filename - App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

export default function App() {
	return (
		<div style={{ display: "block", width: 700, padding: 30 }}>
			<h4>React-Bootstrap Col Component</h4>
			<Row>
				<Col
					style={{
						backgroundColor: "red"
					}}
				>
					Sample First Col
				</Col>
				<Col
					style={{
						backgroundColor: "yellow"
					}}
				>
					Sample Second Col
				</Col>
				<Col
					style={{
						backgroundColor: "green"
					}}
				>
					Sample Third Col
				</Col>
			</Row>
		</div>
	);
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Summary

React-Bootsraps Container, Row and Col components provide a powerful way to create responsive layouts. They use the grid layout system and helps to implement complex and custom designs.