Bootstrap Media Objects

Bootstrap Media Objects are used to create flexible and complex content layouts like comments, tweets, blog posts, or lists where an image/media is aligned next to textual content.

Available in Bootstrap 3 & 4. Bootstrap 5 uses flex utilities but the concept is similar.

✅ Basic Media Object



 

  • .media → Main container.

  • .media-left → Aligns media (image/video) to the left.

  • .media-object → Styles image/video.

  • .media-body → Contains text or other content.

🔹 Media Object Right Alignment



 

  • .media-right → Aligns media to the right side.

🔹 Nested Media Objects


 

  • Media objects can nest infinitely for comments or replies.

🔹 Media List



 

  • .media-list → Used for multiple media items like comments or tweets.

✔ Summary

Feature Supported
Media left/right alignment ✔️
Nested media objects ✔️
Multiple media list ✔️
Headings and body content ✔️
Images, videos, or any media ✔️

You may also like...