How to use Bootstrap 5 in React JS?

Hi,

Here, I will show you how to work how to use bootstrap 5 in react js. you will learn how to add bootstrap 5 in react js. you’ll learn how to integrate bootstrap in react js. This tutorial will give you a simple example of reactjs install bootstrap 4. follow the below step for reactjs add bootstrap 5.

Bootstrap is a wold best design framework right now. Currently bootstrap 4 and bootstrap 5 version is running. Bootstrap provides alerts, buttons, badge, card, modal, forms, collapse, navs, pagination etc.

In this post, i will show you step by step how to install bootstrap in reactjs app. we will create new react js project and install “react-bootstrap and bootstrap” npm packages for bootstrap. so let’s follow below command:

Step 1: Create React JS App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app bootstrap-app

Step 2: Install React-Bootstrap

In this step, we will install bootstrap and react-bootstrap npm package for bootstrap design component. let’s run the below command:

npm install react-bootstrap bootstrap

Step 3: Import Bootstrap CSS File

In this step, we will import bootstrap css file in index.js file of react js app. so let’s add it.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Step 4: Update App.js Component

Here, we will use bootstrap design class and button component for demo. so just update App.js file as below:

import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="container">
      <h1>How to Install Bootstrap in React JS? - MyWebTus.com</h1> 
      <div class="alert alert-success" role="alert">
        This is a success alert—check it out!
      </div>

      <Button variant="primary">Primary</Button>{' '}

    </div>
  );
}

export default App;

Step 5: Run React JS App

All the required steps have been done, now you have to type the given below command and hit enter to run the React app:

npm start

Output:

I hope it could help you.

Read more: https://www.mywebtuts.com/blog/how-to-install-bootstrap-in-react-js