Image for post
Image for post
Photo by Jeffrey F Lin on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add media with Reactstrap.

Media

Media is a container that can hold images and text.

To use it, we import the Media component and write:

We used the Media component as a container for content.

Also, we used it to display an image by adding the object , src and alt props.

We also used it with the body prop to display content.

The heading prop makes it a heading

Body text doesn’t need to be between any tags.

Nesting

We can nest Media components.

For example, we can write:

We nested the Media components to add an image with text side by side inside the outer Media component.

Alignment

The Media component has props to change the alignment of the media.

For example, we can write:

We added the left and top props to align the image to the top left.

Also, we can use the middle and bottom props to align the media to the middle or the bottom.

Conclusion

We can use the Media component as containers for text and images.

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