How to Install and Use Bootstrap in a React App: A Step-by-Step Guide

In this article, we'll walk you through how to easily add Bootstrap to your React app. Bootstrap provides ready-to-use styles and components that make web development faster and easier. We’ll explore two methods to integrate Bootstrap into your React application:

1. Using the Bootstrap Library

   This method allows you to use all the Bootstrap 4 classes directly in your React app.

2. Using React-Bootstrap

   With React-Bootstrap, you can easily import and use Bootstrap components like buttons, alerts, navbars, and more.

Let’s dive into both methods!

Method 1: Installing Bootstrap 4 in React

To begin, open your terminal and run the following npm command to install Bootstrap:

npm install --save bootstrap

Next, import the Bootstrap CSS into your src/index.js file:

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

Now you can start using Bootstrap classes in your components. For example, in src/App.js, you can write:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <h1>Bootstrap in React</h1>
      <button className="btn btn-success">Success Button</button>
      <button className="btn btn-primary">Primary Button</button>
      <div className="alert alert-success">This is a success alert.</div>
    </div>
  );
}
export default App;

Method 2: Installing React-Bootstrap

React-Bootstrap allows you to import and use Bootstrap components as React components. First, install both React-Bootstrap and Bootstrap:

npm install react-bootstrap bootstrap

Then, import the Bootstrap CSS in src/index.js just like before:

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

Now, in src/App.js, you can use React-Bootstrap components like this:

import React from 'react';
import { Button, Alert } from 'react-bootstrap';

function App() {
  return (
    <div className="container">
      <Button variant="success">Success</Button>
      <Button variant="primary">Primary</Button>
      <Alert variant="success">This is a success alert!</Alert>
    </div>
  );
}
export default App;

Both methods will get Bootstrap up and running in your React app. Choose the one that fits your needs!