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.
Add .rounded-circle
class to image for round media object.
Wrap media list using .media-bordered
class for bordered Media Object.
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
For left align, use class .mr-3
, For Right align, use class .media-right
.
Now, for vertical align, Top is default alignment. For Middle alignment, use .align-self-center
and For Bottom alignment, use .align-self-end
with left or right aligned class.