How To Install Bootstrap In React JS

In this article, we will see how to install bootstrap in react js. Also, we will see how to use bootstrap in react js. If you work as a front-end developer, then Bootstrap, Foundation, and Bulma kind of frameworks are not new to you. Most industries use the Bootstrap framework. Millions of websites are running on bootstrap.

So, let's see how to install bootstrap 4/5 in react js and how to add bootstrap in react js.

In this article, we will see two ways to install bootstrap in react application.

1. we will use the npm bootstrap library. So, you can easily use all the classes of bootstrap 4 in your react js app.

2. we will use react-bootstrap they provide the library for bootstrap javascript. So, you can easily import bootstrap buttons, alert, navbar, and modal.

Now, we will install bootstrap 4 using the npm command. So, run the following command.

npm install --save bootstrap

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

Now, you can use a bootstrap class like the below code example.

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
    
function App() {
  return (
    <div class="container">
        <h1>How To Install Bootstrap In React JS - Websolutionstuff</h1>
   
        <button class="btn btn-success">Success Button!</button>
        <button class="btn btn-primary">Primary Button!</button>
        <button class="btn btn-danger">Danger Button!</button>
   
        <div class="alert alert-success">
          <p>This is success alert.</p>
        </div>
        <div class="alert alert-primary">
          <p>This is primary alert.</p>
        </div>
        <div class="alert alert-danger">
          <p>This is danger alert.</p>
        </div>
    </div>
  );
}
  
export default App;

 

 

Now, we will install bootstrap using the npm react-bootstrap command.

npm install react-bootstrap bootstrap

After successfully installing bootstrap, we need to import bootstrap CSS in the src/index.js file.

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

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, Alert } from 'react-bootstrap';
  
function App() {
  return (
    <div className="container">
  
        <Button variant="success">Success</Button>
        <Button variant="primary">Primary</Button>
        <Button variant="danger">Danger</Button>
   
        <Alert key="1" variant="success">
           This is a success message!
        </Alert>
    </div>
  );
}
  
export default App;

 

---

You might also like:

• Read Also: How To Use CSS In React JS
• Read Also: How To File Upload In React JS
• Read Also: How To Install React JS Step By Step
• Read Also: Autocomplete Search using Bootstrap Typeahead JS