How to Use Bootstrap With React

Bootstrap React1 Comment on How to Use Bootstrap With React

How to Use Bootstrap With React

React, one of the best JavaScript libraries in making interactive User Interface(UI) components are getting more attention by developers nowadays. It’s component-based structure and huge community support made react an easy tool for creating stunning web UIs in record time.

But 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.

Using React-Bootstrap

React-bootstrap is the package recommended in official react documentation page. This package helps us in using Bootstrap components in React. In this package, the native Bootstrap components are rewritten as JSX components which are compatible with React.

Using react-bootstrap in our react application is as follows.

Install React-Bootstrap and Bootstrap

First, we need to install the react-bootstrap and bootstrap package in our React app.

npm install react-bootstrap bootstrap --save

Import Bootstrap

Now Import bootstrap.css in our root file (index.js).

import "bootstrap/dist/css/bootstrap.css";

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.

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,

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

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';

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.

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 React application.

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 React components.

<button type="button" class="btn btn-primary">
   I am a button
</button

Linking Local Bootstrap.css File

If we have a bootstrap.css file and do not wish to use bootstrap CDN, we can link the file in our react application. 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">

Using Bootstrap NPM

Bootstrap can also be installed in our application using NPM. So we do not need to download and paste the bootstrap.css file inside the public directory by ourself in this method.

Install Bootstrap

The below command will install bootstrap in our React application.

npm install --save bootstrap

Import Bootstrap.css File

Now the bootstrap.css file can be imported to our root file(index.js).

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

Now we can use any bootstrap class inside our React components.

<button type="button" class="btn btn-primary">
   I am a button
</button

From the above methods, We can choose any appropriate method we like to use for integrating Bootstrap in our React application.

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

One thought on “How to Use Bootstrap With React

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top