React Bootstrap

The most popular CSS framework for responsive layouts is Bootstrap. This open-source toolkit includes Sass variables, a responsive grid framework, and a large number of JavaScript plugins. It has now been redesigned in React so that it can work with React apps. Bootstrap 4 relies on jQuery, however, jQuery isn’t ideal for React because it manipulates the DOM directly, whereas React works with a virtual DOM. Because React Bootstrap effectively replaces Bootstrap JavaScript, each component has been redesigned to work seamlessly with React.

Why React Bootstrap?

React-Bootstrap is a React-based reimplementation of the Bootstrap components. It doesn’t require either bootstrap.js or jQuery. You already have everything you need if you have React and React-Bootstrap installed.

Installing React Bootstrap: We can install it using npm or yarn.

npm install react-bootstrap

Now let’s understand the working of React Bootstrap using an example.

Creating react app: To build a react application follow the below steps:

Step 1: Create a react application using the following command  

npx create-react-app foldername

Step 2: Once it is done change your directory to the newly created application using the following command  

cd foldername

Step 3: Install Bootstrap dependency

npm install bootstrap

Project Structure: It will look like the following.

Example: In this example, we will create an animated progress bar using react-bootstrap.

import Progress from "./Progress";
function App() {
return (
    <div className="App">
    <Progress />
    </div>
);
}

export default App;

import React from "react";
import ProgressBar from 'react-bootstrap/ProgressBar'
function Progress() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                <center>GeeksforGeeks</center>
            </h1>

            <div class="container">
            <div className="progress-bar bg-primary
                            progress-bar-striped
                            progress-bar-animated"
                            style={{width:'50%'}}>50%</div>
            <br></br>
            <div className="progress-bar bg-success
                            progress-bar-striped
                            progress-bar-animated"
                            style={{width:'90%'}}>90%</div>
            <br></br>
            <div className="progress-bar bg-warning
                            progress-bar-striped
                            progress-bar-animated"
                            style={{width:'30%'}}>30%</div>
            <br></br>
            <div className="progress-bar bg-danger
                            progress-bar-striped
                            progress-bar-animated"
                            style={{width:'10%'}}>10%</div>
            <br></br>
            <div className="progress-bar bg-info
                            progress-bar-striped
                            progress-bar-animated"
                            style={{width:'70%'}}>70%</div>
            </div>    
        </div>
    )
}

export default Progress;

Step to run the Application: Enter the following command to run the application.

npm start

Output:

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above