Install Bootstrap In A React Application

Introduction 

 
In this blog, you will learn to install bootstrap in your React application. We will see how to use bootstrap in React.
 

What is bootstrap?

 
Bootstrap is a free front-end framework for faster and easier web development; Bootstrap includes HTML and CSS-based design templates.
 
Step 1
 
Create a brand new react application or open an existing one. Open the terminal in Visual Studio Code or in the command prompt and follow the below steps.
  1. E:\REACT PROJECTS>npx create-react-app counter-app  
  2.   
  3. E:\REACT PROJECTS>cd counter-app  
  4.   
  5. E:\REACT PROJECTS>npm install bootstrap –save  
  6.   
  7. E:\REACT PROJECTS\counter-app>code .  
If you are in Visual Studio terminal, follow the below steps:
  1. PS E:\REACT PROJECTS\counter-app>  
  2.   
  3. npm install bootstrap –save  
Step 2
 
Now register your bootstrap and font-awesome in Index.js which is located under the src folder of your application.
  1. import React from "react";  
  2. import ReactDOM from "react-dom";  
  3. import "./index.css";  
  4. import App from "./App";  
  5. import * as serviceWorker from "./serviceWorker";  
  6. import bootstrap from "bootstrap/dist/css/bootstrap.min.css";  
  7.   
  8. ReactDOM.render(  
  9.   <React.StrictMode>  
  10.     <App />  
  11.   </React.StrictMode>,  
  12.   document.getElementById("root")  
  13. );  
  14. serviceWorker.unregister();  
Step 3
 
Open App.js and modify it as shown below.
  1. import React from "react";  
  2. import logo from "./logo.svg";  
  3. import "./App.css";  
  4.   
  5. function App() {  
  6.   return (  
  7.     <div className="container py-4">  
  8.       <h1 className="text-center text-uppercase">  
  9.         Welcome to react app development  
  10.       </h1>  
  11.       <div>  
  12.         <h3>Bootstrap 4 Buttons</h3>  
  13.         <button type="button" className="btn btn-primary rounded-0">  
  14.           Primary  
  15.         </button>  
  16.         <button type="button" className="btn btn-secondary rounded-0">  
  17.           Secondary  
  18.         </button>  
  19.         <button type="button" className="btn btn-light rounded-0">  
  20.           Light  
  21.         </button>  
  22.         <button type="button" className="btn btn-danger rounded-0">  
  23.           Danger  
  24.         </button>  
  25.         <button type="button" className="btn btn-success rounded-0">  
  26.           Success  
  27.         </button>  
  28.         <button type="button" className="btn btn-info rounded-0">  
  29.           info  
  30.         </button>  
  31.         <button type="button" className="btn btn-warning rounded-0">  
  32.           Warning  
  33.         </button>  
  34.         <button type="button" className="btn btn-dark rounded-0">  
  35.           Dark  
  36.         </button>  
  37.       </div>  
  38.     </div>  
  39.   );  
  40. }  
  41.   
  42. export default App;  



Next Recommended Reading How To Create A Simple React App