React Bootstrap — Media Layout

Image for post
Image for post
Photo by Nikolay Tchaouchev 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 Order

We can flip the image and the content within the Media component.

For instance, we can write:

to place the image on the right instead of the left.

Media List

To make the Media component display as a list, we can add the as='li' prop to our Media component.

For instance, we can write:

We added multiple Media components.

And with the as='li' prop on each, they’re rendered as li elements.

So we can put them inside a ul element.

Conclusion

We can switch the order of a media component.

Also, we can render them as li components so that they can be displayed on a list.

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