3 Ways to Add Bootstrap to React – React Bootstrap

There are many different ways of installing Bootstrap in React, In this tutorial, we’ll learn different ways of installing Bootstrap and what is the best approach of using react bootstrap.

In this article, we have three goals behind this tutorial. First, we will learn correct way of installing bootstrap in React project. Secondly, we explore the difference between react bootstrap vs reactstrap. At last, how to use the bootstrap component in our React project? Let’s get started.

Differents way add bootstrap in react.

There are different approaches to adding the bootstrap framework to our React project. We will discuss different ways of adding bootstrap and discuss the advantages or disadvantages of it.

1. react-bootstrap: This is one of most popular libary to add bootstrap component in react.  This library doesn’t have any dependencies on bootstrap.js or jQuery. React-Bootstrap is compatible with various versions of Bootstrap.
2. reactstrap : Stateless React Components for Bootstrap 5.
3. Using bootstrap CDN – If your project is using Bootstrap then is better to use first and second option, this two libraries provide lots of ready made components.

Difference between react-bootstrap and reactstrap

Both libraries are popular for using Bootstrap in react applications. There is not a big difference between them as the underlying engine that powers both are actually the same. Let’s check the difference between them.

How to install bootstrap in react ?

Let us create a new React app using the create-react-app command as follows.

npx create-react-app react-bootstrap-app  
cd react-bootstrap-app

Once we had created react project, let’s install each of these two libraries in a separate react project.

Method 1: Using react-bootstrap

React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions. Let’s install this library in our react application. We also need to install bootstrap.

npm install react-bootstrap
npm install bootstrap@5.1.3

Because React-Bootstrap doesn’t depend on a very precise version of Bootstrap. However, some stylesheet is required to use these components. Let import bootstrap CSS in src/index.js

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

Example of react bootstrap component Button

Let’s first use the Button component from react-bootstrap. Here is a screenshot of our first react-bootstrap example.

Let’s edit the App.js to include React bootstrap Button component from the react-bootstrap library.

import Button from 'react-bootstrap/Button';

const App = () => {
  return (
    // <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
    <div className='container'>
      <Button variant="outline-primary">Primary</Button>{' '}
      <Button variant="outline-secondary">Secondary</Button>{' '}
      <Button variant="outline-success">Success</Button>{' '}
      <Button variant="outline-warning">Warning</Button>{' '}
      <Button variant="outline-danger">Danger</Button>{' '}
      <Button variant="outline-info">Info</Button>{' '}
      <Button variant="outline-light">Light</Button>{' '}
      <Button variant="outline-dark">Dark</Button>
  </div>
  );
};

export default App;

Install React bootstrap using reactstrap library

The reactstrap library allows us to use the bootstrap component in our react project. The reactstrap has a large number of premade components that are ready to use in our react project. Let’s first use the Button and Card component from reactstrap. Here is a screenshot of our example of react bootstrap.

Step for install or implementing reactstrap in React project

Let’s install and implement the reactstrap in our react project, this library also depends on the bootstrap library. Let’s first create a project and install all required libraries to implement the reactstrap.

npx create-react-app my-app
cd my-app
npm i bootstrap
 reactstrap

Second, we need to import Bootstrap CSS in the src/index.js file:

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

Step 3, now we can use the reactstrap component, let add Button and Card component in our App.js component.

import logo from './logo.svg';
import './App.css';
import { Button, Card, CardBody, CardTitle, CardImg, CardText, CardSubtitle } from 'reactstrap';

function App() {
  return (
    <div className="App">
      <div className='card-container'>
        <Card>
          <CardImg alt="Card image cap" src="https://picsum.photos/318/180"
            top width="100%"/>
          <CardBody>
            <CardTitle tag="h5">
              Card title
            </CardTitle>
            <CardSubtitle className="mb-2 text-muted" tag="h6">
              Card subtitle
            </CardSubtitle>
            <CardText>
              This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <Button>Button</Button>
          </CardBody>
        </Card>
      </div>
      <Button color="primary" className='btn'>Primary!</Button>
      <Button color="danger" className='btn'>Danger!</Button>
    </div>
  );
}

export default App;

Unlike react-bootstrap, the reactstrap, all components are imported from the same module the reactstrap.

Using Bootstrap CDN

We can use Bootstrap CDN, this is one of the easier ways to use bootstrap CSS. We don’t need to install the Bootstrap library. This is not recommended approach and if we used components that depend on Javascript then we need to include Popper.js, and Bootstrap.js in the document.

Note: Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery.

Let’s first add Bootstrap CSS CDN in our public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
     ...

    <title>React App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body>
    ....
  </body>
</html>

Let’s use Bootstrap Badge using bootstrap.css only and here is a screenshot of our example.

function App() {
  return (
    <div className="App">
      <h1>Example heading <span class="badge bg-secondary">New</span></h1>
      <h2>Example heading <span class="badge bg-secondary">New</span></h2>
      <h3>Example heading <span class="badge bg-secondary">New</span></h3>
      <h4>Example heading <span class="badge bg-secondary">New</span></h4>
      <h5>Example heading <span class="badge bg-secondary">New</span></h5>
      <h6>Example heading <span class="badge bg-secondary">New</span></h6>
    </div>
  );
}

export default App;

If the component is dependent on Javascript then import this CDN link bottom of the page place <script> tag, just before the closing </body> 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>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>

Conclusion
There are different options to use UI framework in react project and if you want to use Bootstrap in your project. Then it is recommended to use libraries like react-bootstrap and reactstrap, instead of Bootstrap CDN.

Related posts

• How to implement React routing using react router dom 6?
• How to implement React routing using react router dom 6?