Product Delivery
Targeted Sales
Collicitudin vel metus scelerisque ante commodo.
In Progress25% Completed
Bootstrap 4 Media objects
The media object is an abstract element used as the basis for building more complex and repetitive components.
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
Wrap media list using .media-bordered
class for bordered Media Object.
Use class .media-head
inside .media
class.
Add .rounded-circle
class to image for round media object.
Wrap media list using .media-bordered
class for bordered Media Object.
Use class .media-head
inside .media
class.
Find different options for media title.
Use class .text-muted
for muted media text.
Wrap .media
with .media-linked
and use <a>
tag which contains .media-link
to wrap image, title & text.
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
For left align, use class .media-left
, For Right align, use class .media-right
.
Now, for vertical align, Top is default alignment. For Middle alignment, use .media-middle
and For Bottom alignment, use .media-bottom
with left or right aligned class.
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
Add some custom text to media body. This text can be date, time, any short info, notification, etc.
Some more examples using media objects to know how to use it.