How to install and use react-bootstrap in react js?

Hi Friends 👋,

Welcome To aGuideHub!

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

Today, I am going to show you, how to install and use react-bootstrap in react js.

install and use react-bootstrap

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

npm

npm install react-bootstrap bootstrap

yarn

yarn add react-bootstrap bootstrap

Table of contents

• Set up the React project.
• Import necessary components.
• Use react-bootstrap.

Step 1: Set up the React 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 necessary components.

After installing react-bootstrap, you have to import your React component. To do this, add the following line to the top of your Button.js file.

import Button from "react-bootstrap/Button";

Step 3: Importing Bootstrap.

To use react-bootstrap components, add the following code to App.js.

import 'bootstrap/dist/css/bootstrap.min.css';

Step 4: Use react-bootstrap.

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

<div>
   <Button variant="danger" >Click Me!</Button>
</div>

React react-bootstrap example.

The code below is an example of this, Use an imported component with props which can be found in the React Bootstrap docs. For example, a button has props such as variant, type, target, size, etc.

App.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from "react-bootstrap/Button";

function App() {
  return (
    <div>
      <Button variant="danger" >Click Me!</Button>
    </div>
  );
}

export default App;

Check the output of the above code example.

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

Try it Yourself

All the best 👍