Bootstrap, originally named Twitter Blueprint, is a free and open-source front-end component library which acts as a toolkit with HTML, CSS, and JS and you may employ it to do stuff such as WordPress development, websites designing, developing web-applications, etc. React is a JavaScript library for building user interfaces. Their individual importance is already clear to any eCommerce development company but these 2 frameworks are often used together; React is a view library without any built-in mechanism for creating responsive designs so here is where Bootstrap, a front-end design framework steps in. However, integrating Bootstrap framework with React allows the developers to use Bootstrap’s exceptional grid system and its other components.
There are several ways to integrate Bootstrap with React. Some of the most commonly used methods are:
1. Bootstrap Stylesheet with React
For setting up a Bootstrap Stylesheet with React, we first have to create a React project. This we do by using the Create React App CLI as it requires zero configuration to get started.
After installing Create React App, run the following command to start a new project and serve the development build:
$ create-react-app react-and-bootstrap
$ cd react-and-bootstrap
$ npm start
Create React App will create a directory structure as follows:
├── 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
Then, download the Bootstrap library from Bootstrap’s official site which will come with the compiled as well as the minified versions of CSS and JavaScript. Now, copy the CSS and place it inside the public/ directory and create a new directory for CSS in public/. In the newly created CSS directory, paste bootstrap.min.css and link it from public/index.html:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
We can also fetch the minified CSS using the bootstrap CDN:
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
2. Bootstrap as Dependency
If you want to add Bootstrap to your React application and you are using a build tool or a module bundler, then installing Bootstrap as a dependency for your app is a preferred option in this case:
If you’re using Webpack:
npm install bootstrap
If you’re using Yarn:
yarn add bootstrap
After installing Bootstrap, include it to your app’s entry JavaScript file. If you’re using Create React App, this should be your src/index.js file
Now you can use the built-in Bootstrap classes in your React application but you need to install jquery and popper.js to be able to use Bootstrap’s Java components in your app (if they aren’t already installed).
npm install jquery popper.js
Now additional changes need to be made to the src/index.js to add the new dependencies.
- import ‘bootstrap/dist/css/bootstrap.min.css’;
- import $ from ‘jquery’;
- import Popper from ‘popper.js’;
- import ‘bootstrap/dist/js/bootstrap.bundle.min’;
- import React from ‘react’;
- import ReactDOM from ‘react-dom’;
- import ‘./index.css’;
- import App from ‘./App’;
- import registerServiceWorker from ‘./registerServiceWorker’;
- ReactDOM.render(<Dropdown />, document.getElementById(‘root’));
- registerServiceWorker();
Now you can use Bootstrap JavaScript components as well.
3. React-Bootstrap Packages
Another way of integrating Bootstrap with React is using a third-party libraries which try to create a React-based enactment of Bootstrap so that you can work with Bootstrap styles and use JSX components simultaneously.
Some popular Bootstrap modules that can be used with React projects are React-bootstrap and reactstrap, as well as React-UI, and domain-specific modules like React-bootstrap-table, and CoreUI-React Admin Panel on GitHub which provide extended support for developing user interfaces using React.
React-bootstrap, as of now, is one of the most popular libraries for integrating Bootstrap components with React. Its only ‘downside’ is that it doesn’t use the latest version of Bootstrap and instead targets Bootstrap v3. It is in active development and the application program interface might break at the release of a newer version.
Reactstrap is the only popular module that is built for and uses the latest version of Bootstrap. It includes components for icons, forms, buttons, typography, layout, tables, grids, and navigation. It is also in active development and is a good alternative for building React-powered Bootstrap apps by using Bootstrap components in React.
Since Reactstrap targets the latest version of Bootstrap, here’s how to set up the Reactstrap library:
First of all, install the Reactstrap library using npm:
npm install --save reactstrap@next
Then import the relevant components from the module:
import { Container, Row, Col} from 'reactstrap';
But in order for the library to work as we expect it to, you need to add Bootstrap CSS to it as it is not precluded:
npm install --save bootstrap
Then, we import Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.css';
In this article, you have explored multiple methods which can be employed to integrate Bootstrap’s look and components into React-powered web apps. You have also learned how to operate Reactstrap to build a React contact list app. In short, now you know how to integrate Bootstrap with React to make the best of both frameworks.
Author Bio:
Junaid Ali Qureshi is a digital marketing specialist who has helped several businesses gain traffic, outperform competition and generate profitable leads. His current ventures include Progostech, Magentodevelopers.online.eLabelz, Smart Leads.ae, Progos Tech and eCig.