Mar 24, 2023 Author - Sai gowtham

How to add bootstrap to a React app

react1min read

In this tutorial, we are going to learn about how to add a bootstrap CSS library to react app.

Adding bootstrap to React

Open, your terminal and navigate to the react app folder
Run the following command in your terminal to install the bootstrap and its dependencies.

npm i bootstrap jquery popper.js

Open the react app in your favorite code editor.
Navigate to the index.js file and the below imports.

index.js

import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap.min.js';

Using the bootstrap

Now, we can use the bootstrap css classes inside our react components like this.

App.js

import React from "react";

export default function App() {
  return (
    <div className="App">
      <div className="alert alert-primary" role="alert">        A simple primary alert—check it out!
      </div>
      <div className="alert alert-secondary" role="alert">        A simple secondary alert—check it out!
      </div>
    </div>
  );
}