Categories
React Bootstrap

React Bootstrap — Media

Spread the love

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 Objects

Media objects let us build complex and repetitive components.

It’s also based on flexbox as with the grid.

To use it 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>
        <img
          width={64}
          height={64}
          className="mr-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
        <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>
      </Media>
    </>
  );
}

We just use the Media component as a wrapper.

Inside it, we have the img element with the width and height of the image.

src is the URL of the image.

className has the styling class we want to apply.

alt is the text description of the image.

Media.Body has the body of the content, which is displayed to the right of the image.

Inside it, we can have anything we want.

Media Nesting

Media components can be nested.

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>
        <img
          width={64}
          height={64}
          className="mr-3"
          src="http://placekitten.com/200/200"
          alt="cat"
        />
        <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>
            <img
              width={64}
              height={64}
              className="mr-3"
              src="http://placekitten.com/100/100"
              alt="another cat"
            />
            <Media.Body>
              <h2>Another Heading</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.Body>
      </Media>
    </>
  );
}

We have another Media component nested in the Media.Body of the first Media component.

Media Alignment

The media in the Media component’s position can be changed.

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>
        <img
          width={64}
          height={64}
          className="align-self-end mr-3"
          src="[http://placekitten.com/200/200](http://placekitten.com/200/200)"
          alt="cat"
        />
        <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>
      </Media>
    </>
  );
}

We change the className of the img element to move the image to the bottom.

Conclusion

We can create Media components to create a layout with an image on the left and text on the right.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *