Install Bootstrap in Reactjs

 Today we are going to discuss about installing bootstrap in your reactjs application. There are two different ways to install bootstrap in your reactjs application. I am giving you both solutions, you can prefer which looks good for you

Solution1 : We can install bootstrap npm library directly, so we can easily use all the classes in our reactjs application.

Solution2: We can install react-bootstrap package, so they will provide library for bootstrap javascript. 

I am moving to the solution 1 

Solution 1 

Step 1 : 

Creating new reactjs application

npx create-react-app my-app

Step 2:

Now we are installing bootstrap in our reactjs application. Since we are using the npm command for installing the bootstrap, let us run the below command 

npm install --save bootstrap

Step 3:

Once we successfully installed bootstrap, we can able import bootstrap.css in the index.js file as you can see below

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

Step 4: 

So our index.js looks like below

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.css';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

reportWebVitals();

Step5: 

Now our App.js will be 

import './App.css';

function App() {

  return (

    <div class="container">

      <br/>

      <button class="btn btn-success">Success Button!</button> &nbsp;

      <button class="btn btn-primary">Primary Button!</button>  &nbsp;

      <button class="btn btn-danger">Danger Button!</button>  &nbsp;

      <br/><br/><br/>

      <div class="alert alert-success">

        <p>This is success alert.</p>

      </div>

      <br/>

      <div class="alert alert-primary">

        <p>This is primary alert.</p>

      </div>

      <br/>

      <div class="alert alert-danger">

        <p>This is danger alert.</p>

      </div>

    </div>

  );

}

export default App;

 

Solution 2:

Step 1 : 

Creating new reactjs application

npx create-react-app my-app

Step 2:

We are installing the bootstrap using the react-bootstrap command. So let us run the below command in our reactjs application. 

npm install react-bootstrap bootstrap

Step 3:

Once we successfully installed bootstrap we can import bootstrap.css in the index.js file like below

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

Step 4: 

So our index.js looks like below

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.css';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

reportWebVitals();

Step 5: 

Our App.js as follows

import React from 'react';

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 alert—check it out!

        </Alert>

    </div>

  );

}

 

export default App;

I am pushing the sample code for solution 1 in the git. Hope it helps. See you on next blog