Media Objects

Bootstrap's component classes for displaying various repetitive layouts of mixed content (media and text).

Reference: Adapted from https://getbootstrap.com/docs/4.0/layout/media-object/#content

Learn more

To learn more visit Bootstrap's Media Object documentation.

Basic Media Object

Displays a media object (image, video, audio) to the left or right of a text block.

Reference: Adapted from https://getbootstrap.com/docs/4.0/layout/media-object/#example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tincidunt auctor. Nam ac augue vel elit fermentum interdum. Mauris condimentum dui odio, nec molestie orci blandit id. Maecenas nec vehicula nunc. Nullam malesuada metus vel vestibulum fermentum. Sed id metus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum vestibulum orci, sed molestie velit tincidunt vel.

Media Object With Left-aligned Image

Displays a media object (image, video, audio) to the left of a text block.

Reference: Adapted from https://getbootstrap.com/docs/4.0/layout/media-object/#example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tincidunt auctor. Nam ac augue vel elit fermentum interdum. Mauris condimentum dui odio, nec molestie orci blandit id. Maecenas nec vehicula nunc. Nullam malesuada metus vel vestibulum fermentum. Sed id metus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum vestibulum orci, sed molestie velit tincidunt vel.

Nested Media Object

A media object indented below another media object.

Reference: Adapted from https://getbootstrap.com/docs/4.0/layout/media-object/#example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tincidunt auctor. Nam ac augue vel elit fermentum interdum. Mauris condimentum dui odio, nec molestie orci blandit id. Maecenas nec vehicula nunc. Nullam malesuada metus vel vestibulum fermentum. Sed id metus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum vestibulum orci, sed molestie velit tincidunt vel.

Media Object With Right-aligned Image

Displays a media object (image, video, audio) to the right of a text block.

Reference: Adapted from https://getbootstrap.com/docs/4.0/layout/media-object/#example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tincidunt auctor. Nam ac augue vel elit fermentum interdum. Mauris condimentum dui odio, nec molestie orci blandit id. Maecenas nec vehicula nunc. Nullam malesuada metus vel vestibulum fermentum. Sed id metus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum vestibulum orci, sed molestie velit tincidunt vel.
Third-party Content Disclaimer