How to install bootstrap 5 in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To install bootstrap 5 in React js, you have to use the npm or yarn package manager that is how you can install the bootstrap 5 library into your project.

Today, I am going to show you, how to install bootstrap 5 in react js.

install bootstrap 5

Install the following packages to use bootstrap 5 in react js.

npm

npm install react-bootstrap@2.7.2 bootstrap@5.1.3

Table of contents

• Create a new React JS project.
• Import the bootstrap 5 component.
• Use bootstrap 5 components in the project.

Let’s start with the first step.

Step 1: Create a new React JS project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import bootstrap 5 component.

After installing install bootstrap 5, you have to import your React component. To do this, add the following line to the top of your component file.

import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

Step 3: Use bootstrap 5 components in the project.

A button element is defined inside a App element. The button has the class of variant and displays the text Primary.

<div>
  <>
    <h1>Bootstrap 5 with React</h1>
    <Button variant="primary">Primary</Button>{" "}
    <Button variant="secondary">Secondary</Button>{" "}
    <Button variant="success">Success</Button>{" "}
    <Button variant="warning">Warning</Button>{" "}
    <Button variant="danger">Danger</Button>{" "}
    <Button variant="info">Info</Button>{" "}
  </>
</div>

ReactJS use bootstrap 5 example.

This code below is an example, The code below is an example of this, we have to style with CSS and include the button.

App.js

import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
  return (
    <div>
      <>
        <h1>Bootstrap 5 with React</h1>
        <Button variant="primary">Primary</Button>{" "}
        <Button variant="secondary">Secondary</Button>{" "}
        <Button variant="success">Success</Button>{" "}
        <Button variant="warning">Warning</Button>{" "}
        <Button variant="danger">Danger</Button>{" "}
        <Button variant="info">Info</Button>{" "}
      </>
    </div>
  );
}

export default App;

Check the output of the above code example.

Here, we are provided code sandbox links for the above program to install bootstrap 5 in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍