Reactstrap — Media

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.

Conclusion

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