How to Add Bootstrap to React App Project

26 Nov 2022

Bootstrap is a popular CSS framework that provides a set of pre-designed components and layout styles that can be easily integrated into a web application. If you’re building a React app and want to use Bootstrap to style your app, there are a few different ways you can go about it. Here are three options for adding Bootstrap to your React app:

1. Install the Bootstrap package

The first option is to install the Bootstrap package from NPM(Node Package Manager) and then import Bootstrap CSS into your React app. This is the recommended way to use Bootstrap in a React Project, as it allows you to take advantage of the modular nature of React and only import the parts of Bootstrap that you need.

To do this, you’ll need to have npm installed on your computer. Then, open your terminal and navigate to the root directory of your React app. Run the following command to install the Bootstrap package:

npm install bootstrap

This will install the most recent Bootstrap package into your node_modules folder. Next, open your src/index.js file and import the Bootstrap CSS by adding the following line at the top of the file:

// Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css';
// Bootstrap JS
import "bootstrap/dist/js/bootstrap.bundle.min";

That’s it! You can now use any of the Bootstrap components in your React app.

2. Use Bootstrap CDN

Another option for adding Bootstrap to a React app is to use a CDN (Content Delivery Network). By using a CDN, you can load Bootstrap into your app simply by adding a link to the Bootstrap CSS file in the head of your HTML file.

To do this, open your public/index.html file and add the following line in the head section:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

This will load the Bootstrap CSS file from the Bootstrap CDN. You can now use any of the Bootstrap components in your React app.

To use use Bootstrap component that comes with Bootstrap like modal, dropdowns and popovers, the following script tag before the closing </body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

3. Download Bootstrap and link to it locally

A third option for adding Bootstrap to a React app is to download the Bootstrap CSS file and link to it locally in your HTML file. To do this, visit the Bootstrap website and click the “Download” button to download the Bootstrap CSS file.

Next, create a new folder in your public directory called “css” and place the Bootstrap CSS file in this folder. Then, open your public/index.html file and add the following line in the head section:

<link rel="stylesheet" href="/css/bootstrap.css">

This will link to the Bootstrap CSS file that you just downloaded. You can now use any of the Bootstrap components in your React app.

To use use Bootstrap component that comes with Bootstrap like modal, dropdowns and popovers, create a js file and place Bootstrap Javascript file in the folder. the following script tag before the closing </body> tag.

<script src="/js/bootstrap.js"></script>

4. Install React Bootstrap Package

React Bootstrap packages are libraries that have been specifically designed to integrate Bootstrap components with React. They provide a set of React components that correspond to various Bootstrap styles and elements, and allow you to use these components in your React app with a familiar syntax. The most commonly used ones are react-bootstrap or reactstrap.

To use a React Bootstrap package in your React app, you’ll need to install the package using npm and then import the components that you want to use.

installing react-bootstrap

npm install react-bootstrap bootstrap

Using react-bootstrap

import { Button } from 'react-bootstrap';

function MyComponent() {
  return <Button>Click me!</Button>;
}

Installing a React Bootstrap package is a good option if you want to use Bootstrap components in a way that is more integrated with React, or if you want to use a smaller subset of Bootstrap styles in your app.

Regardless of which method you choose, adding Bootstrap to a React app will help with styling and layout of your app. Remember to always choose the method that fits your project and work flow.