React Bootstrap — Media

Image for post
Image for post
Photo by Marek Szturc 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 work with React Bootstrap’s media objects to add complex and repetitive components.

Media Objects

Media objects let us build complex and repetitive components.

It’s also based on flexbox as with the grid.

To use it we can write:

We just use the Media component as a wrapper.

Inside it, we have the img element with the width and height of the image.

src is the URL of the image.

className has the styling class we want to apply.

alt is the text description of the image.

Media.Body has the body of the content, which is displayed to the right of the image.

Inside it, we can have anything we want.

Media Nesting

Media components can be nested.

For instance, we can write:

We have another Media component nested in the Media.Body of the first Media component.

Media Alignment

The media in the Media component’s position can be changed.

For instance, we can write:

We change the className of the img element to move the image to the bottom.

Conclusion

We can create Media components to create a layout with an image on the left and text on the right.

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