React Bootstrap — Images, Jumbotrons, and Figures

Image for post
Image for post
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:

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:

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

Fluid Images

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

For instance, we can write:

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:

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:

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:

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.

JavaScript In Plain English

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

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/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