Hello Devs,


In this tutorial, we are going to learn how to implement react install bootstrap example.

Follow this step by step guide given below:




1) Install Bootstrap 4

npm install --save bootstrap

Run this command:

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';
    
function App() {
  return (
    <div class="container">
        <h1>How to Install Bootstrap in React App - Rathorji.in</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

npm install react-bootstrap bootstrap

Run this command:

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


I hope this example helps you.