Bootstrap 4 Media Objects

Float media to the right or left of content with Bootstrap's media object component.

Bootstrap's media object component provides an easy way to align text and media objects when presenting them alongside each other. It allows you to quickly and easily float media to the left and/or right of a content block. Useful for UI components such as blog comments, Tweets, etc.

<div class="media">
<img class="mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Media Heading</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
	
<div class="media">
<img class="mr-3" src="/pix/samples/11s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Media Heading</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>

How to Use

To use the media object component, you need to apply a class for the outer container, as well as separate classes to the media and to the text.

Outer Container: Wrap the whole thing in a <div> and give it the .media class.
Media Object: No special class is needed for the media object (eg, <img>, <video> etc). Just insert it into the HTML where you need it.
Media Body: Apply the .media-body class to the text's parent <div> or other element. Also apply the .media-heading to any headings inside the media body.
Margins: Use a Booststrap spacing utility to apply margins to the media object (for example, mr-3).

Nested Media Objects

You can nest media objects inside each other (i.e. the whole media block). The nested media block will be indented by default.

<div class="media">
<img class="mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

<!-- Start Nested Media Object -->
<div class="media">
<img class="mr-3" src="/pix/samples/10s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Nested Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<!-- End Nested Media Object -->

</div>
</div>

Horizontal Alignment

You can swap the position of the media object and media body in your markup (so that the heading and text come before the image).

<div class="media">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<img class="mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
</div>
	
<div class="media">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<img class="mr-3" src="/pix/samples/11s.jpg" alt="Sample photo">
</div>

Vertical Alignment

Media objects are top-aligned by default. You can change this with any of the flexbox utility classes. For example, to align to the middle, use d-flex align-self-center. The d-flex part ensures that display: flex is applied to the element.

Middle

<div class="media">
<img class="d-flex align-self-center mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>

Bottom

<div class="media">
<img class="d-flex align-self-end mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>

Two Media Objects

You can place more than one image into a media block.

<div class="media">
<div>
<img class="mr-2" src="/pix/samples/9s.jpg" alt="Sample photo">
<img class="mr-3" src="/pix/samples/10s.jpg" alt="Sample photo">
</div>
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>

Left & Right Aligned

You can have two media objects appear within a media block — one to the left and one to the right. The media body will need to be inserted between them in the markup.

<div class="media">
<img class="mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<img class="ml-3" src="/pix/samples/10s.jpg" alt="Sample photo">
</div>

Media Lists

You can create a media list by placing media objects inside a list. Media lists can be useful for presenting user comment threads, article lists, etc.

To create a media list, apply the .list-unstyled class to the <ul> tag, and the .media class to the <li> tag.

<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="/pix/samples/9s.jpg" alt="Photo of Pukeko in New Zealand">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

<!-- Start Nested Media Object -->
<div class="media">
<img class="mr-3" src="/pix/samples/10s.jpg" alt="Photo of bird in the Philippines">
<div class="media-body">
<h4>Nested Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<!-- End Nested Media Object -->

</div>
</li>
<li class="media">
<img class="mr-3" src="/pix/samples/11s.jpg" alt="Photo of sunset in Laos">
<div class="media-body">
<h4>Media Object</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</li>
</ul>