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:

import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<div className="App">
<Media>
<Media left href="#">
<Media object src="http://placekitten.com/200/200" alt="cat" />
</Media>
<Media body>
<Media heading>Media heading</Media>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
Vivamus porta est eu auctor sodales. Aliquam et dolor vel augue tempor
ullamcorper. Etiam velit lacus, blandit at gravida sit amet, pulvinar
et est. Pellentesque pharetra ultricies magna non vehicula.
Pellentesque placerat lacus ac tincidunt accumsan. Praesent turpis
arcu, eleifend id orci vel, rhoncus lobortis magna.
</Media>
</Media>
</div>
);
}

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:

import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<div className="App">
<Media>
<Media left href="#">
<Media object src="http://placekitten.com/200/200" alt="cat" />
</Media>
<Media body>
<Media heading>Media heading</Media>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
Vivamus porta est eu auctor sodales. Aliquam et dolor vel augue tempor
ullamcorper. Etiam velit lacus, blandit at gravida sit amet, pulvinar
et est. Pellentesque pharetra ultricies magna non vehicula.
Pellentesque placerat lacus ac tincidunt accumsan. Praesent turpis
arcu, eleifend id orci vel, rhoncus lobortis magna.
<Media>
<Media left href="#">
<Media object src="http://placekitten.com/201/201" cat="cat" />
</Media>
<Media body>
<Media heading>Nested media heading</Media>
Aliquam et dolor vel augue tempor ullamcorper. Etiam velit lacus,
blandit at gravida sit amet, pulvinar et est. Pellentesque
pharetra ultricies magna non vehicula. Pellentesque placerat lacus
ac tincidunt accumsan. Praesent turpis arcu, eleifend id orci vel,
rhoncus lobortis magna.
</Media>
</Media>
</Media>
</Media>
</div>
);
}

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:

import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<div className="App">
<Media>
<Media left top href="#">
<Media object src="http://placekitten.com/200/200" alt="cat" />
</Media>
<Media body>
<Media heading>Media heading</Media>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
sollicitudin tortor eu velit laoreet, vitae eleifend ipsum aliquam.
Vivamus porta est eu auctor sodales.
</Media>
</Media>
</div>
);
}

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.

Photo by Adriana Saraceanu on Unsplash

Conclusion

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

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