Bootstrap is a very popular CSS framework for developing visually appealing and responsive web applications. It has a large set of pre-built components collection and these components can help to build a consistent interface. You can use Bootstrap in React to make your React application more stunning and user-friendly.

In this article, we will guide you, on how to add Bootstrap in React.js Application.

First, you need to create a React project, which I probably guess you already know.

Now open your terminal and install Bootstrap in React application using the below command.

npm install bootstrap

This command will install the bootstrap as a dependency inside your react project.

Once the installation is finished you can open the index.js file and import the bootstrap.css file at the top of the index.js file.

import 'bootstrap/dist/css/bootstrap.css';

Save these changes and you are good to go.

Congratulations! You have added Bootstrap to your React project.

Let’s see one basic example with a few Bootstrap classes, so you can get an idea, of how you can use it.

import React from 'react';

const AppComponent = () => {
  return (
    <div className="container">
      <h1 className="text-center">Add Bootstrap in React</h1>
      <button className="btn btn-primary">Button with Primary Class</button>
    </div>
  );
};
export default AppComponent;

In the above example, we used the bootstrap container class which gives space around the container div from the left and right side, text-center class which aligns the text to the center inside a div element and we also used btn-primary class, which basically comes with the default primary color scheme.

That’s it! You have successfully added Bootstrap to your React project and can utilize its components and styles in your application.

Thank you for reading, Happy Coding 🙂