DEV Community

Cover image for Different ways of using Bootstrap 4 in React application

Different ways of using Bootstrap 4 in React application

Pankaj Kumar
I am javascript developer having experience of 8 years+ on different frameworks/libraries of Javascaipt. I am interested to explore more in js.
・1 min read

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.

By Installing Bootstrap NPM library
By using Bootstrap CDN
Using React-Bootstrap library in React
Using Reactstrap

The above article is republished from https// Click here to read the complete article.

Discussion (2)

barzi92367868 profile image

There's a mistake in the full article: "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."
And then you show a JS import statement. I think you wanted to write index.js, maybe

dance2die profile image
Sung M. Kim

Hi @pankaj .

We encourage the entire article to be published on (if you have proper rights), with a link back if appropriate. Otherwise, we recommend original material, such as original commentary on the article. From the Terms of Use:

Users must make a good-faith effort to share content that is...not designed primarily for the purposes of promotion or creating backlinks. Additionally, posts must contain substantial content — they may not merely reference an external link that contains the full post.

Posts that are simply intended to encourage readers to view an external resource are discouraged.

Thank you.