2/5/22, 8:23 AM Media object · Bootstrap

There's a newer version of Bootstrap 4!

Media object
Documentation and examples for Bootstrap’s media
object to construct highly repetitive components like blog
Search...
comments, tweets, and the like.

Limited time offer: Get 10

Getting started
free Adobe Stock images.
ads via Carbon
Layout
Overview

Grid

Media object

Utilities for layout Example #

The media object helps build complex and repetitive components where some media is positioned
Content
alongside content that doesn’t wrap around said media. Plus, it does this with only two required
Components classes thanks to flexbox.
Utilities
Below is an example of a single media object. Only two classes are required—the wrapping .media and
Extend the .media-body around your content. Optional padding and margin can be controlled through
Migration spacing utilities.

About

Media heading
64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

Copy
<div class="media">

<img class="mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0">Media heading</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

</div>

</div>

Flexbug #12: Inline elements aren’t treated as flex items

Internet Explorer 10-11 do not render inline elements like links or images (or ::before and
::after pseudo-elements) as flex items. The only workaround is to set a non-inline display
value (e.g., block, inline-block, or flex). We suggest using .d-flex, one of our display utilities,
as an easy fix.

Source: Flexbugs on GitHub

Nesting
Media objects can be infinitely nested, though we suggest you stop at some point. Place nested
.media within the .media-body of a parent media object.

https://getbootstrap.com/docs/4.0/layout/media-object/ 1/5
2/5/22, 8:23 AM Media object · Bootstrap

Media heading
64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

Media heading
64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.

Copy
<div class="media">

<img class="mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0">Media heading</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media mt-3">

<a class="pr-3" href="#">

<img src="..." alt="Generic placeholder image">

</a>

<div class="media-body">

<h5 class="mt-0">Media heading</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

</div>

</div>

</div>

</div>

Alignment
Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of
your .media-body content.

Top-aligned media
64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Copy
<div class="media">

<img class="align-self-start mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0">Top-aligned media</h5>

<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>

<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

</div>

https://getbootstrap.com/docs/4.0/layout/media-object/ 2/5
2/5/22, 8:23 AM Media object · Bootstrap

Center-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
64x64 Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Copy
<div class="media">

<img class="align-self-center mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0">Center-aligned media</h5>

<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>

<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel
eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.</p>

</div>

</div>

Bottom-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

64x64 Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Copy
<div class="media">

<img class="align-self-end mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0">Bottom-aligned media</h5>

<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</p>

<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel
eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.</p>

</div>

</div>

Order
Change the order of content in media objects by modifying the HTML itself, or by adding some
custom flexbox CSS to set the order property (to an integer of your choosing).

Media object
64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

Copy
https://getbootstrap.com/docs/4.0/layout/media-object/ 3/5
2/5/22, 8:23 AM Media object · Bootstrap
Copy
<div class="media">

<div class="media-body">

<h5 class="mt-0 mb-1">Media object</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

</div>

<img class="ml-3" src="..." alt="Generic placeholder image">

</div>

Media list
Because the media object has so few structural requirements, you can also use these classes on list
HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list
styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine
tune.

List-based media object

64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

List-based media object

64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

List-based media object

64x64
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.

Copy

https://getbootstrap.com/docs/4.0/layout/media-object/ 4/5
2/5/22, 8:23 AM Media object · Bootstrap

<ul class="list-unstyled">

<li class="media">

<img class="mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0 mb-1">List-based media object</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

</div>

</li>

<li class="media my-4">

<img class="mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0 mb-1">List-based media object</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

</div>

</li>

<li class="media">

<img class="mr-3" src="..." alt="Generic placeholder image">

<div class="media-body">

<h5 class="mt-0 mb-1">List-based media object</h5>

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

</div>

</li>

</ul>

https://getbootstrap.com/docs/4.0/layout/media-object/ 5/5