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.

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;