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.
