How To Install Bootstrap In React App?

In this post, i will show you two way to install bootstrap in react application.

1) we will use 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 library for bootstrap javascript. so you can easily import bootstrap buttons, alert, navbar, model and work on it.

Now let's see both way one by one and you can use any one way that you require

Preview:

1) Install Bootstrap 4

Now here, we have to install bootstrap using npm command. so let's run bellow command to install bootstrap in react

npm install --save bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow

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();

Now we are ready to use bootstrap class. so you can use it as like bellow i used.

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 App - codewale.com</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;

2) Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

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();

Now we are ready to use bootstrap class with import component. so you can use it as like bellow i used.

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 alert—check it out!
        </Alert>
    </div>
  );
}
export default App;

Now you can use anyone way.

I hope it can help you...