React Bootstrap — Images, Jumbotrons, and Figures

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add images, figures, and jumbotrons to a React app with React Bootstrap.

Images

React Bootstrap has the Image component to let us add an image of various shapes.

We can have images that are rounded, a circle, or a thumbnail.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Image from "react-bootstrap/Image";

export default function App() {
  return (
    <div>
      <Image src="http://placekitten.com/200/200" rounded />
    </div>
  );
}

to add an image with a rounded corner with the rounded prop.

Likewise, we can add the roundedCircle prop to make the image display in a circle:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Image from "react-bootstrap/Image";

export default function App() {
  return (
    <div>
      <Image src="http://placekitten.com/200/200" roundedCircle />
    </div>
  );
}

We can also add the thumbnail prop to display them as thumbnails:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Image from "react-bootstrap/Image";

export default function App() {
  return (
    <div>
      <Image src="http://placekitten.com/200/200" thumbnail />
    </div>
  );
}

Fluid Images

We can use the fluid prop to scale images to the parent element’s width.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Image from "react-bootstrap/Image";

export default function App() {
  return (
    <div>
      <Image src="http://placekitten.com/200/200" fluid />
    </div>
  );
}

to make the image scale to the parent’s width.

Figures

We can display a piece of content with the Figure component.

One good thing to display with it are images with a caption.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Figure from "react-bootstrap/Figure";

export default function App() {
  return (
    <div>
      <Figure>
        <Figure.Image
          width={171}
          height={180}
          alt="171x180"
          src="http://placekitten.com/200/200"
        />
        <Figure.Caption>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus.
        </Figure.Caption>
      </Figure>
    </div>
  );
}

We have the Figure component, which is a wrapper for the Figure.Image to display an image.

And we have the Figure.Caption component to display the caption below the image.

Jumbotron

A jumbotron is a lightweight and flexible component that can extend the whole viewport to show key content on our app.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Jumbotron from "react-bootstrap/Jumbotron";
import Button from "react-bootstrap/Button";

export default function App() {
  return (
    <div>
      <Jumbotron>
        <h1>Title!</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus.
        </p>
        <p>
          <Button variant="primary">Read more</Button>
        </p>
      </Jumbotron>
    </div>
  );
}

to show a jumbotron with a title and some body text.

At the bottom, we have a button.

We can make it scale with the parent with the fluid prop.

We write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Jumbotron from "react-bootstrap/Jumbotron";
import Button from "react-bootstrap/Button";

export default function App() {
  return (
    <div>
      <Jumbotron fluid>
        <h1>Title!</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus.
        </p>
        <p>
          <Button variant="primary">Read more</Button>
        </p>
      </Jumbotron>
    </div>
  );
}

to make it fluid.

Conclusion

React Bootstrap comes with the Image component to display images.

It also has the Figure and Jumbotron to let us display content in different ways.