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.
Javascript
// 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.
Javascript
// 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.
Javascript
// 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:
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
Contact Us