Author avatar

Ashutosh Singh

How to Use React Bootstrap with NPM

Ashutosh Singh

  • Aug 23, 2020
  • 9 Min read
  • Aug 23, 2020
  • 9 Min read
Web Development
Client-side Frameworks
Front End Web Development


React is currently the most preferred JavaScript framework, according to the StackOverflow 2020 Developer Survey. In this guide, we will discuss React Bootstrap, a popular React UI library.

While there are so many React UI libraries to choose from, React Bootstrap remains a popular choice because of its similarity with traditional Bootstrap and the availability of several Bootstrap themes. It is one of the fastest ways to build interfaces using React and Bootstrap.


To install react-bootstrap as a dependency, run the following command in your React project root directory.

1npm install react-bootstrap bootstrap

Or if you prefer Yarn, use this command.

1yarn add react-bootstrap bootstrap

You might ask why bootstrap is installed in addition to react-bootstrap. The reason is that react-bootstrap doesn't depend on a specific version of Bootstrap and does not include any CSS on its own, but a stylesheet is required to use react-bootstrap components.

Importing Bootstrap

To use react-bootstrap components, add the following code to src/index.js or App .js.

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

And that's it; you can now use React Bootstrap and its components in your app.

Basic Usage

Below are the five most commonly used React Bootstrap components.

  • Buttons
  • Forms
  • Navbar
  • Toasts
  • Modals

Importing Components

There are two ways to import components from React Bootstrap.

1import { Button } from 'react-bootstrap';

Or by pulling specific components from the library.

1import Button from 'react-bootstrap/Button';

This import can significantly reduce the amount of code you end up sending to the client. This may be best for individual components, but not if several components are imported.

Using Components

Here is how you can use any React Bootstrap component in your React app.

  1. Import the component that you want to use, for example, Button.
1import Button from 'react-bootstrap/Button';
  1. Use the imported component with the props that can be found in React Bootstrap docs. For example, Button has props like variant, type, target, size, etc.
1// src/App.js
2import React from "react";
3import Button from "react-bootstrap/Button";
5function App() {
6  return (
7    <div>
8      <Button variant="primary">Click Me!</Button>
9    </div>
10  );
13export default App;

Here is how the button will look.


Even if variant="primary" is removed, the button will still look the same since primary is the default value of variant prop.

You can experiment with different props and create new combinations.

  • Here is a button with variant="danger" and disabled.
1<Button variant="danger" disabled>Click Me!</Button>


  • Here is a button with variant="outline-success" and size="lg".
1<Button variant="outline-success" size="lg">Click Me!</Button>



This example shows the step by step process of styling an app with React Bootstrap.

It will use the character endpoint of the Rick and Morty API, a free REST/GraphQL based API that provides information about characters, episodes, and locations of the Rick and Morty TV show.

  1. First, request data from the /character endpoint. One way to do this is to use fetch() inside useEffect() hook and store the respose data inside the state variable. By providing an empty array as a second argument to useEffect(), you can ensure that the request is made only after the initial render.
1const [data, setData] = useState([]);
3  useEffect(() => {
4    fetch("")
5      .then((res) => res.json())
6      .then((data) => setData(data.results));
7  }, []);

Next, you need to decide which data we want to show in your app; this example will show name ,image,status, and url. You can check out the Character Schema here.

  1. You can show the character data in React Bootstrap's Card component. First, make empty cards based on the number of characters in the response using .map() method on the data state.
1// src/App.js
2import React, { useEffect, useState } from "react";
4function App() {
5 const [data, setData] = useState([]);
7  useEffect(() => {
8    fetch("")
9      .then((res) => res.json())
10      .then((data) => setData(data.results));
11  }, []);
13  return (
14    <div>
15      { => (
16          <Card key={} style={{ width: "18rem" }}> 
17         </Card>
18      ))}
19    </div>
20  );
23export default App;

Here, id of the character is used as the value of the key prop. You will not see anything in the app, since the <Card> component is itself empty.

  1. You can use Card.Img to display the image inside the <Card> component.
1<Card key={} style={{ width: "18rem" }}>
2      <Card.Img variant="top" src={character.image} />

Now your application will show different characters' images in a single line without a margin.


You can add className="m-4" to add some margin between cards.

1<Card className="m-4" key={} style={{ width: "18rem" }}>
2   <Card.Img variant="top" src={character.image} />
  1. To show name and species, use Card.Title and Card.Text inside Card.Body.
1<Card className="m-4" key={} style={{ width: "18rem" }}>
2  <Card.Img variant="top" src={character.image} />
3  <Card.Body>
4    <Card.Title>{}</Card.Title>
5    <Card.Text>{character.species}</Card.Text>
6  </Card.Body>

Here is how your card will look.


  1. Finally, add a Buttonto show more information about a particular character. You will also need to import the Button component from the react-bootstrap library.
2 <Card.Title>{}</Card.Title>
3 <Card.Text>{character.species}</Card.Text>
4 <Button variant="primary" href={character.url} target="_blank">
5    More Info
6 </Button>

Here is how your app will look.


  1. All the cards in a single line don't look right. To change the layout of the <Card> component, render everything inside <CardColumns> instead of <div>, which will divide the cards into columns.
1import React, { useEffect, useState } from "react";
2import { Card, CardColumns, Button } from "react-bootstrap";
4function App() {
5  const [data, setData] = useState([]);
7  useEffect(() => {
8    fetch("")
9      .then((res) => res.json())
10      .then((data) => setData(data.results));
11  }, []);
12  return (
13    <CardColumns>
14      { => (
15        <Card className="m-4" key={} style={{ width: "20rem" }}>
16          <Card.Img variant="top" src={character.image} />
18          <Card.Body>
19            <Card.Title>{}</Card.Title>
20            <Card.Text>{character.species}</Card.Text>
21            <Button variant="primary" href={character.url} target="_blank">
22              More Info
23            </Button>
24          </Card.Body>
25        </Card>
26      ))}
27    </CardColumns>
28  );
31export default App;

Here is how your app will look.


You can use the example used here to experiment with different React Bootstrap components.

Here are some ideas to experiment with:

  • Use Modals to show more information about a character when More Info button is clicked.
  • Add a Navbar to the app.


In this guide, we discussed how to install and use React Bootstrap in any React app, and we saw an example where styling became more straightforward and faster with React Bootstrap. Not every component was discussed here, so you should try to explore different components available in React Bootstrap.

Here are some additional resources that can be helpful.

Happy coding!