Install Bootstrap In A React Application

In this blog, you will learn how to install bootstrap in your 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.

E:\REACT PROJECTS>npx create-react-app counter-app

E:\REACT PROJECTS>cd counter-app

E:\REACT PROJECTS>npm install bootstrap –save

E:\REACT PROJECTS\counter-app>code .

If you are in Visual Studio terminal, follow the below steps:

PS E:\REACT PROJECTS\counter-app>

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.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import bootstrap from "bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
serviceWorker.unregister();

Step 3

 

Open App.js and modify it as shown below.

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="container py-4">
      <h1 className="text-center text-uppercase">
        Welcome to react app development
      </h1>
      <div>
        <h3>Bootstrap 4 Buttons</h3>
        <button type="button" className="btn btn-primary rounded-0">
          Primary
        </button>
        <button type="button" className="btn btn-secondary rounded-0">
          Secondary
        </button>
        <button type="button" className="btn btn-light rounded-0">
          Light
        </button>
        <button type="button" className="btn btn-danger rounded-0">
          Danger
        </button>
        <button type="button" className="btn btn-success rounded-0">
          Success
        </button>
        <button type="button" className="btn btn-info rounded-0">
          info
        </button>
        <button type="button" className="btn btn-warning rounded-0">
          Warning
        </button>
        <button type="button" className="btn btn-dark rounded-0">
          Dark
        </button>
      </div>
    </div>
  );
}

export default App;