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.