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

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.

Photo by Diana R. on Unsplash

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.

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store