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 alignment. For Top alignment, use .align-self-start
class. For Middle alignment, use .align-self-center
and For Bottom alignment, use .align-self-end
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.