React, one of the best JavaScript libraries in making interactive User Interface(UI) components are getting more attention from developers nowadays. When discussing UI, we can not neglect the Bootstrap framework. Here we will discuss the methods of integrating Bootstrap with React.
Making responsive web User Interfaces(UIs) are not that much easier without using CSS frameworks/libraries. Bootstrap is the best and most used one in this category.
Adding Bootstrap to a react application is not that much easier because Bootstrap dependencies include jQuery (another JavaScript library). So using Bootstrap directly in a react application may misbehave.
But some packages will help us adding Bootstrap in our React application. The advantage of using these packages in our react application is that the Bootstrap components are separately defined inside the package and we just need to pass the props to make it work.
So here in this article, we are going to discuss the 4 methods of using Bootstrap in our React application.
1. Using React-Bootstrap
This is the package that recommended on the official react documentation page. This package helps us in using Bootstrap components in our app. In this package, the native Bootstrap components are rewritten as JSX components that are compatible with React.
Follow the below steps to integrate this package in our app.
1.1 Install React-Bootstrap and Bootstrap
First, we need to install the react-bootstrap and bootstrap package in our project.
npm install react-bootstrap bootstrap --save
1.2 Import Bootstrap
Now Import bootstrap.css in our root file (index.js).
import "bootstrap/dist/css/bootstrap.css";
1.3 Import Individual React-Bootstrap Components
Then we can import the individual react-bootstrap components that we need in our application UI.
import { Button } from 'react-bootstrap';
So we can display a bootstrap button in the view using the code below.
<Button variant="primary" size="lg" active> I am a Button </Button>
The complete list of props that can be used to customize the react-bootstrap components are available in the official documentation page.
2. Using Reactstrap
Reactstrap is a similar package like react-bootstrap which allows the usage of Bootstrap components. This package is also recommended by the official react documentation page.
To use Reactstrap in our React application,
2.1 Install Reactstrap
First, we need to install the Install Reactstrap and its peer dependencies via NPM.
npm install bootstrap --save npm install reactstrap react react-dom --save
2.2 Import Bootstrap
Now we can import the individual Reactstrap components that we need in our application UI.
Import bootstrap.min.css in our root file (index.js).
import 'bootstrap/dist/css/bootstrap.min.css';
2.3 Import Individual Reactstrap Components
Then we can import the individual Reactstrap components that we need in our application UI.
import { Button } from "reactstrap";
So we can display a bootstrap button in the view using the code below.
<Button color="danger">I am a Button</Button>
The complete list of props that can be used to customize the react-bootstrap components are available in the official documentation page.
3. Linking Local Bootstrap.css File/CDN
So we have discussed two packages that help using Bootstrap in our React application. Now we also have a simple method for this. But note that this method applies only if we need to use bootstrap.css and doesn’t need the jQuery plugins.
If we are going with this method, first, we need to add a local bootstrap.css file or bootstrap.css CDN in the index.html file of our app.
3.1 Linking Bootstrap CDN
First, we can learn the method of using Bootstrap by linking Bootstrap CDN in our application.
Now in the index.html file under /public directory, link the CDN.
Note: Paste the below line in <head></head> section of our index.html file.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Now we can use any bootstrap class inside our app.
<button type="button" class="btn btn-primary"> I am a button </button
3.2 Linking Local Bootstrap.css File(recommended)
If we have a bootstrap.css file and do not wish to use the CDN, we can link the file in our application locally. For this, create a directory named “bootstrap” inside /public. and paste the bootstrap.css file inside it.
Now in the index.html file under /public directory, link the file.
Note: Paste the below line in <head></head> section of our index.html file.
<link rel="stylesheet" href="/bootstrap/bootstrap.css">
4. Using Bootstrap NPM Package
Bootstrap can use in our application using its NPM package. So we do not need to download and paste the bootstrap.css file inside the public directory by ourselves in this method.
4.1 Install Bootstrap
First, install bootstrap NPM package. The below command will install bootstrap in our project.
npm install --save bootstrap
4.2 Import Bootstrap.css File
So after installation of the bootstrap package, we can import the bootstrap.css to our root file(index.js).
import 'bootstrap/dist/css/bootstrap.css';
Now we can use any bootstrap class inside our app. Use the below code for reference.
<button type="button" class="btn btn-primary"> I am a button </button
From the above methods, We can choose any appropriate one. This may depend upon your project. The first, second, and fourth methods are depending on some NPM packages. the third method is the best way I think because it does not depend on any other packages and easy to do.
Summary
So in this article, we discussed the various methods of using Bootstrap inside a React project. Each method has its own advantages and disadvantages. But Techomoro recommends the 3rd method “Linking Local Bootstrap.css File/CDN”. It is easier and faster.
Thanks for the article, was useful!