Usage
Only two classes are required: the wrapping .media
and the .media-body
around your content.
<div class="media">
<svg>...</svg>
<div class="media-body">
<h5 class="mt-0">
Media heading
</h5>
<p>...</p>
</div>
</div>
Nesting
Media objects can be nested by placing the nested media object within the .media-body
of a parent media object.
<div class="media">
<svg>...</svg>
<div class="media-body">
<h5 class="mt-0">
Media heading
</h5>
<p>...</p>
<div class="media">
<svg>...</svg>
<div class="media-body">
<h5 class="mt-0">
Media heading
</h5>
<p>...</p>
</div>
</div>
</div>
</div>
Alignment
Use flex utilities like .align-self-center
and .align-self-end
to align media within a media object.
<div class="media">
<svg class="align-self-center">...</svg>
<div class="media-body">
<h5 class="mt-0">
Center aligned media
</h5>
<p>...</p>
</div>
</div>
<div class="media">
<svg class="align-self-end">...</svg>
<div class="media-body">
<h5 class="mt-0">
Bottom aligned media
</h5>
<p>...</p>
</div>
</div>
Order
Change the order of content in media objects by modifying the HTML itself or using order utilities, like .flex-last
.
<div class="media">
<svg class="flex-last">...</svg>
<div class="media-body">
<h5 class="mt-0">
Media heading
</h5>
<p>...</p>
</div>
</div>