Vivek Kumar

Integrating Bootstrap and React – Part 1

Vivek Kumar

May 19, 2019
8 Min read
95 Views

May 19, 2019
8 Min read
95 Views

Web Development

React

Introduction

After going through this guide, you will be able to integrate Bootstrap along with React, allowing you to make use of the exclusive grid system available to Bootstrap as well as its other crucial components.

The guide is in series with Integrating Bootstrap and React - Part 2 and Integrating Bootstrap and React - Part 3. By the end of these guides, you will have explored all techniques and tools that are crucial in developing the user interface along with the appearance of Bootstrap for the web application that is powered by React.

Creating an Application for Contact List of React Using Reactstrap

When it comes to web applications that are highly interactive, React is such a JavaScript technology that has a very crucial role to play. The main reason why it is considered crucial is mainly because of the algorithm that is very fast rendering, modular approach that is based on component and composing ability.

Also, it is important to note that there are few drawbacks with this technology. For instance, you won’t be able to find the built-in mechanism with React, as it is a view library. Thus, you may find it hard to generate designs which are intuitive, responsive, and sleek. It is here the role of Bootstrap - one of a front end framework of design comes becomes clear.

Problem While Including Bootstrap Components with React

The question arises, “why it is not considered a good option to include the components of Bootstrap with the React?” Let’s get an answer to this.

If you think the combination of Bootstrap along with React is as simple as adding <link rel = "stylesheet" /> to a file like index.html, then you are completely wrong. That is because the dependency of Bootstrap is on jQuery in respect to powering the components of UI. The approach Direct DOM manipulation is used by jQuery which is actually contradictory to the declaration approach of React.

In case the use where Bootstrap is restricted to a 12-column responsive grip or when any of the parts don’t make use of jQuery, then a developer can simply switch to vanilla-Bootstrap style sheet. It is so because you will find a substantial number of libraries that help in clearing the space between Bootstrap and React. Let’s take a comparison of both the techniques, so that you can judge the utility of approach that suits best to your requirements.

Here’s how to proceed!

How to Set up Stylesheet of Bootstrap along with React?

To begin with, it is important to make use of Create React App in order to prepare a zero-configuration based React project initially.

First of all, you need to create a React App. Thereafter, you need to make use of the below-given command in order to initiate a novel project and move ahead:

1
2
3
$ create-react-app react-and-bootstrap
$ cd react-and-bootstrap
$ npm start

After you give the command, Create React App will form a directory structure, which should look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── README.md
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock

Once done, you are required to download the Bootstrap library’s latest version from the official Bootstrap site. It is important to note here that both the minified and compiled versions of JavaScript and CSS are included in the package. All you are required to do is to simply copy CSS and put it within the public/directory. In case there are projects that make use of the grid, then you need notworry, as there is an option of the inclusion of the stylesheet that is grid specified.

Moving ahead, inside public/, you need to prepare a novel directory for the CSS. Next, you should paste bootstrap.min.css in the CSS directory that is newly built. Finally, you should link the same from public/index.html. Here’s the code for the same:

1
2
3
<head>
<link rel = "stylesheet" href = "css/bootstrap.min.css">
</head>

html

It is not necessary to follow the above method only, you may make use of CDN in order to fetch minified CSS. Here’s the code for the same:

1
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

html

Let us get to the inference to acknowledge what results worked and what not with this setup.

Making Use of Vanilla-Bootstrap along with React

After the Bootstrap style sheet is added to the React project, you can make use of the normal Bootstrap classes within the code of JSX. Thereafter, proceed to the demo site of the Bootstrap and copy any kind of example code randomly. This activity is just to make sure, how the resultant would be:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import { render } from "react-dom";
import NavBar from "./NavBar";
import Forms from "./Forms";

const App = () => (
  <div>
    <NavBar />
    <br />
    <div className = "container">
      <div className = "row">
        <div className = " col-lg-offset-2 col-lg-10">
          <Forms />
        </div>
      </div>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));

javascript

Nav It’s real - you can try out the actual form here

So, now you can perceive the form, which appears good, however, that is not the case with NavBar. This is because this bar is dependent on the plugin of Collapse jQuery, which is not imported yet. Due to this, it is difficult to toggle the navigation links. Not just that, you may find it hard to make use of features like modal windows, dropdown menus, closable alerts, etc.

Are you convinced that it’s great to import the Bootstrap as components of React in order to make the best out of it? To illustrate it better, suppose you can make use of the components of Row, Grid, and Column combination for organizing the page, without using the HTML classes. It should look something like below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- Bootstrap with HTML classes -->

<div class = "container">
  <div class = "row">
    <div class = "col-sm">
      One of three columns
    </div>
    <div class = "col-sm">
      One of three columns
    </div>
    <div class = "col-sm">
      One of three columns
    </div>
  </div>
</div>

<!-- Bootstrap with React Components -->

<Grid>
  <Row>
      <Col sm>
        One of three columns
    </Col>
    <Col sm>
        One of three columns
    </Col>
     <Col sm>
        One of three columns
    </Col>
  </Row>
</Grid>

html

It is good that, for serving this purpose, you are not required to implement the library of your own because you will find a good number of solutions that are readily available.

Conclusion

In this guide, you have learned about the basic integration of React with Bootstrap. In the next guide, Integrating Bootstrap and React - Part 2 we will look at the perks of using third-party libraries for Bootstrap and React, setting up the Reactstrap library, and Bootstrap grid basics. In the third guide, Integrating Bootstrap and React - Part 3 we will learn about the various components available in the Reactstrap.

Reference

While writing this guide, the below-mentioned resources have been used for reference:

Integrating Bootstrap with React: a Guide for Developers React App code Bootstrap Official Website

Test your skills. Learn something new. Get help. Repeat.

Start a FREE 10-day trial