React Bootstrap — Media Layout

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:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Media>
        <Media.Body>
          <h2>Title</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
        </Media.Body>
        <img
          width={64}
          height={64}
          className="ml-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
      </Media>
    </>
  );
}

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:

import React from "react";
import Media from "react-bootstrap/Media";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <ul className="list-unstyled">
        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/200/200"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 1</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
              tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
              eget lectus a ante convallis gravida. Donec fringilla odio ut
              magna gravida aliquam. Cras molestie non ante vel dictum. Cras
              lacinia molestie lacus, in lacinia sapien imperdiet in. Sed
              eleifend laoreet finibus. Integer semper dictum eros nec eleifend.
              Nunc quam mi, finibus lacinia metus vitae, dapibus ultricies diam.
              Vivamus ante nisi, pellentesque at lacus eu, vehicula pretium
              lorem. Nunc vitae ligula laoreet, accumsan diam et, auctor mauris.
              Fusce vitae posuere nibh, vitae eleifend quam. Duis a enim lacus.
            </p>
          </Media.Body>
        </Media>

        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/189/189"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 2</h2>
            <p>
              Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
              porttitor, ornare ex et, finibus ante. Aenean mattis ligula
              lectus, a aliquet est pharetra et. Donec sit amet est massa.
              Maecenas dolor ante, congue sit amet mattis eu, vehicula quis
              nisl. Nulla viverra ligula vitae mollis sagittis. Fusce volutpat
              convallis purus. Vestibulum tincidunt elit id aliquam placerat.
              Vivamus vestibulum enim sed eros ullamcorper congue. Fusce nec
              tincidunt arcu. Sed sed suscipit justo, ac eleifend mauris. Morbi
              molestie turpis a accumsan mollis. Aenean vel diam vitae ante
              tincidunt varius.
            </p>
          </Media.Body>
        </Media>

        <Media as="li">
          <img
            width={64}
            height={64}
            className="ml-3"
            src="http://placekitten.com/188/188"
            alt="cat"
          />
          <Media.Body>
            <h2>Title 3</h2>
            <p>
              Ut scelerisque tellus sit amet magna venenatis, sit amet auctor
              est mollis. Nunc aliquet ipsum neque, vel tincidunt dolor vehicula
              nec. Praesent placerat mattis mi, vitae sollicitudin tortor
              viverra vel. Etiam non auctor ante, eu vehicula mi. Donec non
              imperdiet ligula. Sed quam massa, placerat quis venenatis ut,
              aliquam quis tortor. Ut vulputate nunc non enim commodo, vitae
              lobortis sapien tincidunt. Quisque imperdiet augue eu tincidunt
              venenatis. Nunc porttitor a sem quis volutpat. Integer eget
              ultrices nisi. Nunc placerat erat quis enim fermentum pharetra.
              Morbi consequat tortor eget iaculis cursus. Pellentesque vitae
              ligula non dolor porttitor rhoncus quis et erat.
            </p>
          </Media.Body>
        </Media>
      </ul>
    </>
  );
}

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.