How to use Bootstrap with React?

Looking for some ways to use designing frameworks such as bootstrap with React? You are at correct place to get an overall idea about it. We will be working with react that is a Frontend library used for creating single page applications.

As react is a view library it doesn’t come with any mechanism that would leverage creating designs that are responsive and sleek. So, we would need to use a designing framework that is bootstrap in our case. There are other designing frameworks available as well such as Foundation, Bulma, etc. We can say that Bootstrap is popular as designing framework as much as react is popular as Frontend library.

In this article, we’ll learn how to use React and Bootstrap, how to add Bootstrap to a React app, how to install React Bootstrap packages, and, finally, how to create a React app with Bootstrap.

Let’s check out the ways for using bootstrap with react:

1. Using bootstrap CDN
2. Installing bootstrap dependencies in react project
3. Installing bootstrap packages for React

Using Bootstrap CDN

Easiest way to use Bootstrap in our react Application. In this method we don’t require any installations or downloads. For using bootstrap using CDN we just need to place a link in the head section of our application.

In this method we need to place a tag like in the section of the index.html file of our react project. Generally, if we create our app using create-react-app then our index.html file would be located in the public folder.

The latest CDN that we need to place in our index file is

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

To get the latest version of CDN you can also visit the site where you need to find the tag according to our usage, in this case, we are using the bootstrap’s minified CSS and we will copy the link tag.

The steps that we completed till now would work fine for the responsive 12 column grid and the components that won’t require jQuery for example displaying grid would work fine but if we want to use the navbar it won’t work as expected. If we would require JavaScript components of bootstrap then we should add the jQuery, popper.js in the index.html

So, for using JavaScript components we need to place the script tags given below before the closing tags of body i.e., so that it gets enabled

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> 

After making the changes for using bootstrap in our react application with its JavaScript components and the bootstrap classes, our index.html file would look something as shown below except the versions used

Installing bootstrap dependencies in react project

We can also install bootstrap as dependency in our application. Installing bootstrap as dependency is preferred when we are using some build tool or module bundler such as Webpack. The command to install bootstrap using npm is

npm install bootstrap

Now we have added bootstrap as dependency in our react project. To use the bootstrap on our application we need to import the dependency in our application’s entry javascript file. As we have used create-react-app our entry JavaScript file would be located in the src folder (src/index.js) with file name index.js.

As we saw in the previous section that bootstrap components are dependent on jQuery and popper.js. So, we need to install the jQuery and popper.js dependencies so that we can use the JavaScript components of bootstrap. To install the dependencies, we need to run the following command:

npm install jquery popper.js

Now, we need to import these dependencies in our index.js file similar to bootstrap.

Now, we would be able to use the JavaScript components in our project as we have added bootstrap, jQuery and popper.js as dependencies in our react application.

Installing bootstrap packages for React

Installing bootstrap package is the most popular and convenient way to use Bootstrap in our application. There are few libraries that have the react specific implementation of Bootstrap components so that we can use them as JSX components in our application.

We have multiple packages available for using Bootstrap in our application, most popular libraries are:

• React-Bootstrap
• ReactStrap

As per documentation, React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.

ReactStrap library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap JavaScript, as per documentation.

There are some other alternative UI libraries available such as React-UI and some domain-specific modules like CoreUI-React, React-bootstrap-table.

React-Bootstrap

To install the bootstrap as package run the command:

npm install react-bootstrap

After successfully installing, open the App.js or index.js file in the application and add the imports as given below:

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

Things to keep in mind

As you can see, I named my project as “react-bootstrap” for creating a demo alongside the article so that everything is well analyzed. But I ran into a problem when I was performing steps for third way to use bootstrap in this article. I would suggest you to not name the project same as the packages you want to install.

You will get the error as shown in above image if your project name and package you want to use are similar.

If you have already created a project and got to know that coincidently the package that you are gonna use is of same name as your project, don’t worry you can make some minor changes so that you don’t need to recreate the project.

First of all you need to change the name of the project directory as it would be of same name as of the package. Second thing that you need to change is the name of the project in the package.json file. Goto package.json file and change the “name” property to the name similar to the new project directory name.

By making these two changes you can now install the package of your choice.

Summary

In this article we have covered everything about integrating bootstrap with our react application. We learnt about using bootstrap in multiple ways such as using CDN links for bootstrap in our application, adding bootstrap as dependency and also installing jQuery and popper.js and the last way but the popular one is installing bootstrap as package in our react application.