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:

Using Bootstrap CDN
Installing Bootstrap as a dependency
Installing Reactstrap as a dependency

Use bootstrap in React JS as CDN

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.

integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

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

<!DOCTYPE html>

<head>

integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!--

manifest.json provides metadata used when your web app is installed on a

user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

-->

<!--

Notice the use of %PUBLIC_URL% in the tags above.

It will be replaced with the URL of the `public` folder during the build.

Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

work correctly both with client-side routing and a non-root public URL.

Learn how to configure a non-root public URL by running `npm run build`.

-->

<title>React App</title>

</head>

<body>

<!--

This HTML file is a template.

If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.

-->

</body>

</html>

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.

// import react

import React from "react";

// import Bootstrap

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

export default function App() {

return (

<h1>Hello World</h1>

<button className="btn btn-primary">Welcome</button>

</div>

);

}

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.

npm install --save bootstrap

npm install --save reactstrap

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

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

import React from "react";

import ReactDOM from "react-dom";

// import bootstrap

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

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

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

import React from "react";

import { Button } from "reactstrap";

export default (props) => {

return <Button color="primary">Danger!</Button>

};

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!