React Bootstrap Layout

React Bootstrap Layout is a layout utility provided by the React Bootstrap library. They follow a stack style, where elements are arranged vertically or horizontally, creating an organized structure. These layouts are useful for building component-based designs.

In React Bootstrap there are mainly 3 components.

• BreakPoints
• Grid
• Stacks

Creating React Application and installing dependencies:

Step 1: Run the following command to create a react app:

npx create-react-app bootstraplayout

Step 2: Migrate to that directory using:

cd bootstraplayout

Step 3 : Install the required dependencies.

npm i react-bootstrap bootstrap

Project Structure:

The updated dependencies in package.json file will look like:

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

Example 1: Grid System:

It divides the layout into a 12-column grid, allowing developers to allocate different column widths for various screen sizes. To use the grid system, simply import the Container, Row, and Col components from 'react-bootstrap' and structure your layout accordingly.

// App.js

import React from 'react';
import { Container, Row, Col, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
	return (
		<Container className="text-center my-5">
			<Row>
				<Col md={6} className="bg-primary text-white p-4">
					<h2>Column 1</h2>
					<p>This is a visually appealing layout using the grid system approach.</p>
					<Button variant="light">Click me</Button>
				</Col>
				<Col md={6} className="bg-secondary text-white p-4">
					<h2>Column 2</h2>
					<p>Responsive and stunning design to enhance user experience.</p>
					<Button variant="light">Explore</Button>
				</Col>
			</Row>
		</Container>
	);
}

export default App;

Output:

Example 2: Container Component:

The Container component provides a wrapper for your layout, ensuring a consistent and responsive width. Import the Container component and wrap your content inside it. This ensures that your content is displayed within a well-defined space, adapting to different devices seamlessly.

// App.js

import React from 'react';
import { Container, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
	return (
		<Container className="text-center my-5">
			<Card bg="info" text="white">
				<Card.Body>
					<Card.Title>Welcome to our Website</Card.Title>
					<Card.Text>
						Discover the beauty of React Bootstrap Layout with a stunning container component approach.
					</Card.Text>
					<Button variant="light">Learn More</Button>
				</Card.Body>
			</Card>
		</Container>
	);
}

export default App;

Output:

Example 3: Flexbox Utilities:

Flexbox utilities offer a powerful way to control the alignment and distribution of elements within a layout. By applying utility classes such as d-flex and justify-content-between, you can easily customize the positioning of elements.

// App.js

import React from 'react';
import { Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
	return (
		<Container className="d-flex justify-content-around align-items-center flex-wrap my-5">
			<div className="bg-success text-white p-3 m-2">Element 1</div>
			<div className="bg-warning text-dark p-3 m-2">Element 2</div>
			<div className="bg-danger text-white p-3 m-2">Element 3</div>
			<div className="bg-info text-white p-3 m-2">Element 4</div>
		</Container>
	);
}

export default App;

Step 4 :Run the above code using following:

npm start

Output: