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
  3. E:\REACT PROJECTS>cd counter-app
  5. E:\REACT PROJECTS>npm install bootstrap –save
  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>
  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";
  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";
  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. }
  42. export default App;