How to use React with React-Bootstrap
We often find ourselves styling our components in React JS from scratch using CSS. Although that's the conventional way of styling, we can save a lot of time by using Bootstrap.
Bootstrap
Bootstrap is a powerful open-source CSS framework containing prebuilt design templates using HTML, CSS, and Javascript. It can help increase our productivity by manifolds. Now, Bootstrap isn't just limited to plain HTML only. We can easily incorporate it with React JS as well.
A useful feature of Bootstrap is that it opens a world of whole new possibilities when it comes to prebuilt designs. Therefore, it reduces the need for boilerplate code.
React-Bootstrap
React-Bootstrap is built on the same foundation as regular Bootstrap with one slight change. That is that it replaces all instances of Javascript with React components, which makes the entire code compatible with React. This allows Bootstrap to become free of dependencies like jQuery and allows it to be a worthwhile choice in UI design.
Let's take a look at how we can incorporate Bootstrap with React.
Two ways to use React-Bootstrap
React supports different ways to incorporate Bootstrap with it. Two of the most widely used options are as follows:
Bootstrap CDN
React-Bootstrap package
We will dive deeper into both of these options since they're used almost everywhere.
Bootstrap CDN
This is one of the simplest ways to get started with Bootstrap in a React JS project. CDN refers to Content Delivery Network. If we do not wish to install Bootstrap's setup ourselves or host it on our device, we can opt to use the publicly hosted version of Bootstrap online.
As of now, the latest stable version of Bootstrap is 5.3 and, so, we will be using CDN for this version.
The CDN can be added to our main HTML file using a link tag, which will be the public/index.html file in case the project was initialized using the default npx create-react-app command.
Link for React Bootstrap CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Link for React Bootstrap Javascript:
If we wish to add dynamic Javascript behavior, a link for Bootstrap's Javascript CDN must also be added using a script tag.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
After these additions, our index.html should look like something along the lines of this:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script></body></html>
React-Bootstrap package
React provides its users with a wide range of packages offering diverse functionalities. One of its packages is specifically Bootstrap oriented.
Note: We can use the npm command to install packages in React JS. Ensure that the latest version of Node JS is installed on your system.
The package for Bootstrap is named react-bootstrap and must be installed first before we can make use of its UI features.
Note: React-bootstrap is a package offered by React JS in which Bootstrap has completely been rewritten in the form of React Components. This makes its usage completely React oriented in terms of syntax.
We can type the following command in the directory of our React App and that takes care of the installation for us.
npm install react-bootstrap bootstrap
Once the installation is complete, we can now import any component provided by React-Bootstrap in our React files and can then integrate and render that component just like we would do with any other component.
Let's say we want to use the Navbar component provided by Bootstrap. We will import it as follows:
import { Navbar } from 'react-bootstrap';
After importing it, we will use the Navbar in our code as mentioned below:
<Navbar bg="light" expand="lg">// your code goes here</Navbar>
Having covered both ways to incorporate Bootstrap in our React Application, let's take a working example to get hands-on practice with our newfound knowledge.
Code sample
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import './style.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Click on Run and experiment with the code to see how React allows us to use Bootstrap components.
The app.js file is where the Bootstrap components are added. We've used Form.Check to render checkboxes and Button to render a button in our React Application. We've also used basic Bootstrap classes like "mt-4" i.e. a margin-top of value 4 in our code. Our application is now ready to go live!
Upon clicking the Bootstrap Button, we generate an alert to show interactivity.
That's all we need to do to set up Bootstrap in React and start using its components.
