Different ways of using Bootstrap 4 in React application

In this article, We will discuss about the different ways by which Bootstrap 4 can be added in React application. 

What is Bootstrap?

As per Official Website:

It is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Bootstrap 4 is the latest version of Bootstrap.

In layman’s terms:

Bootstrap is a giant collection of handy, reusable bits of code written in HTML, CSS, and JavaScript. It’s also a front-end development framework that enables developers & designers to quickly build fully responsive websites.

Bootstrap saves you from writing lots of CSS code, giving you more time to spend on designing webpages.

 

What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

 

Different Ways to Include Bootstrap 4 in Your React Application

There are different ways by which you can add Bootstrap 4 into your application.

1. By Installing Bootstrap NPM library
2. By using Bootstrap CDN 
3. Using React-Bootstrap library in React
4. Using Reactstrap

We will see next how to implement the above 4 ways in our React application.

1. By Installing Bootstrap NPM library

This is one of the preferred ways to add Bootstrap 4 in our React application. We need to run below command on our terminal to add Bootstrap in our app.

 

After installing bootstrap from terminal, Next step is to import Bootstrap css file in our React Application. Go to src/index.html and add below line.

 

Bootstrap requires other Javascript libraries like JQuery, Popper.js, and Bootstrap.js to work its javascript components. So run below command for the same.

Also add below line of code into src/index.js

 

2. By using Bootstrap CDN

This is one of the very easiest ways to add Bootstrap in React application. Need just one line of code in public/index.html file.

 

As Boostrap requires jQuery, Popper and Boostrap js to add in our React app to work its javascript related component. So add below line of code in the same file.

 

3. Using React-Bootstrap library in React

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

Run below command to add it in React application

 

4. Using Reactstrap

Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:

Run below command over terminal to add Reactstrap.

 

Import Bootstrap CSS in the src/index.js file:

Import required reactstrap components within src/App.js file or your custom component files:

 

Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method.

 

Conclusion

We have gone through different ways to add Bootstrap 4 into the React application and it's very easy to use Bootstrap 4 in React application. If you are new to React, then you can find React.js basic CRUD application and User Login and Registration application to learn more in React.js with step by step sample application. 

Let me know your thoughts over email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!