Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Media Objects

Media Objects are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content.

Bootstrap 4 Media Objects

Neo Post published on 26th May, 2019

Bootstrap 4 Media Objects

Reva Post published on 27th May, 2019

Bootstrap 4 Media Objects

Neo Post published on 28th May, 2019

Bootstrap 4 Media Objects

Nancy Post published on 27th May, 2019

Bootstrap 4 Media Objects

Tonya Post published on 26th May, 2019


Basic Media Object

Use .media class to the container element and place media content inside the child container with .media-body class.

Add padding and margins as needed, with the spacing utilities.

Bootstrap 4 Media Objects

Neo Post published on 26th May, 2019

Run code

Nested Media Objects

Media objects can be infinitely nested, though we suggest you stop at some point.

Place nested .media within the .media-body of a parent media object.

Bootstrap 4 Media Objects

Neo Post published on 26th May, 2019

Bootstrap 4 Media Objects

Reva Post published on 27th May, 2019

Run code

Media Order (Right-Aligned Image)

Change the order of content in media objects by adding the image after the .media-body container.

Neo Post published on 26th May, 2019

Bootstrap 4 Media Objects
Run code

Top, Middle or Bottom Alignment

Media in a media object can be aligned with flexbox utilities to the top (default), middle, or bottom of your .media-body content.

Bootstrap 4 Media Objects

Top-aligned media

Bootstrap 4 Media Objects

Center-aligned media

Bootstrap 4 Media Objects

Bottom-aligned media

Run code