Ashutosh Singh

How to Use React Bootstrap with NPM

Ashutosh Singh

Aug 23, 2020
9 Min read
51,603 Views

Aug 23, 2020
9 Min read
51,603 Views

Web Development

Client-side Frameworks

React

Front End Web Development

Introduction

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.

Installation

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

1npm install react-bootstrap bootstrap

bash

Or if you prefer Yarn, use this command.

1yarn add react-bootstrap bootstrap

bash

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';

JSX

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';

JSX

Or by pulling specific components from the library.

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

JSX

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.

Import the component that you want to use, for example, Button.

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

JSX

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";
4
5function App() {
6  return (
7    <div>
8      <Button variant="primary">Click Me!</Button>
9    </div>
10  );
11}
12
13export default App;

JSX

Here is how the button will look.

Button_varaint_primary

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>

JSX

Button_danger_disabled

Here is a button with variant="outline-success" and size="lg".

1<Button variant="outline-success" size="lg">Click Me!</Button>

JSX

Button_outline_success_lg

Example

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.

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([]);
2
3  useEffect(() => {
4    fetch("https://rickandmortyapi.com/api/character/")
5      .then((res) => res.json())
6      .then((data) => setData(data.results));
7  }, []);

JSX

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.

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";
3
4function App() {
5 const [data, setData] = useState([]);
6
7  useEffect(() => {
8    fetch("https://rickandmortyapi.com/api/character/")
9      .then((res) => res.json())
10      .then((data) => setData(data.results));
11  }, []);
12
13  return (
14    <div>
15      {data.map((character) => (
16          <Card key={character.id} style={{ width: "18rem" }}> 
17         </Card>
18      ))}
19    </div>
20  );
21}
22
23export default App;

JSX

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.

You can use Card.Img to display the image inside the <Card> component.

1<Card key={character.id} style={{ width: "18rem" }}>
2      <Card.Img variant="top" src={character.image} />
3</Card>

JSX

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

character_images

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

1<Card className="m-4" key={character.id} style={{ width: "18rem" }}>
2   <Card.Img variant="top" src={character.image} />
3</Card>

JSX

To show name and species, use Card.Title and Card.Text inside Card.Body.

1<Card className="m-4" key={character.id} style={{ width: "18rem" }}>
2  <Card.Img variant="top" src={character.image} />
3  <Card.Body>
4    <Card.Title>{character.name}</Card.Title>
5    <Card.Text>{character.species}</Card.Text>
6  </Card.Body>
7</Card>;

JSX

Here is how your card will look.

character_card

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.

1<Card.Body>
2 <Card.Title>{character.name}</Card.Title>
3 <Card.Text>{character.species}</Card.Text>
4 <Button variant="primary" href={character.url} target="_blank">
5    More Info
6 </Button>
7</Card.Body>

JSX

Here is how your app will look.

character_card

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";
3
4function App() {
5  const [data, setData] = useState([]);
6
7  useEffect(() => {
8    fetch("https://rickandmortyapi.com/api/character/")
9      .then((res) => res.json())
10      .then((data) => setData(data.results));
11  }, []);
12  return (
13    <CardColumns>
14      {data.map((character) => (
15        <Card className="m-4" key={character.id} style={{ width: "20rem" }}>
16          <Card.Img variant="top" src={character.image} />
17
18          <Card.Body>
19            <Card.Title>{character.name}</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  );
29}
30
31export default App;

JSX

Here is how your app will look.

RickandMorty_characters

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.

Conclusion

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.

React Bootstrap Docs

Bootstrap Docs

Happy coding!

LEARN MORE