Use Bootstrap in ReactJS – A complete beginners guide

This post is about how to use bootstrap in react js and we will see it with an example.

Bootstrap is one of the most popular CSS frameworks and it is the seventh most starred project on Github, with more than 142,000 stars.

In this post, we are going to learn how to use bootstrap in react js project and make our react app responsive and beautiful.

We can use bootstrap in multiple ways, some of them are:

  1. Using Bootstrap CDN
  2. Installing Bootstrap as a dependency
  3. Installing Reactstrap as a dependency

Use bootstrap in React JS as CDN

use bootstrap in react js

This is one of the easiest ways to use bootstrap in react js website. You just have to visit getbootstrap.com and there you’ll find the link to the CDN of Bootstrap.

Copy the CDN link and paste it in the index.html of your react app.

This is one of the easiest ways of using Bootstrap with React JS.

Installing Bootstrap as a dependency

The second way of using Bootstrap is to install into your project with the help of npm.

npm install bootstrap

This is going to install Bootstrap into your react project and you can see the bootstrap folder inside node_modules folder.

Now to import bootstrap into your file.

With the help of the above code, you’ll get output something similar to this.

This is also one of the preferred ways of using bootstrap via npm.

Installing Reactstrap as a dependency

This is the most preferred way of using bootstrap with react. It provides easy to use React Bootstrap 4 components. You can install reactstrap and can easily import bootstrap components and use them in your app.

To install reactstrap in your react app, use the below npm command.

npm install --save reactstrap

Note: Reactstrap does not include Bootstrap CSS so this needs to be installed as well.

After installing reactstrap into your project, you need to import bootstrap into your src/index.js file.

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

 

Next step is to import required reactstrap components within src/App.js file or your custom component file.

import { Button } from reactstrap

Or the complete code of src/app.jsx

Well, this was all about how you can use Bootstrap in React JS and I hope it has helped you.

If you find this post helpful, please share it with your friends and also subscribe to our channel.

If you stuck into any kind of error, don’t forget to google it and try to debug it on your own. This will teach you how to debug on your own as someone might have faced a similar problem earlier.

If you still don’t find any solution for your problem, you can ask your doubt in the comment’s section below and we’ll get back to you🤓.

Thanks for your visit and if you are new here, consider subscribing to our newsletter. See you in my next post. Take care, Bye!