React Bootstrap — Images, Jumbotrons, and Figures

Photo by Diana R. on Unsplash

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>
  );
}