The Bootstrap Media Objects like images or videos can be aligned to the left or right with content in an easy and efficient manner. The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.
Basic Media Object: Use .media class to the container element and place media content inside the child container with .media-body class.
Nested Media Objects: The media object can be added inside media object. It is called nested media object.
Right-Aligned Media Image: Add image after the .media-body container to set the image right-aligned.
Top, Middle and Bottom Media Alignment: The .align-self-* classes are used to set the media object on top, middle or bottom of the element.
- Media Objects in Bootstrap with Examples
- Bootstrap | Media queries
- Extract unique objects by attribute from array of objects.
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- YouTube Media/Audio Download using Python | pafy
- CSS | media queries
- How to target desktop, tablet and mobile using Media Query ?
- CSS | @media Rule
- What is the difference between “screen” and “only screen” in media queries?
- Web StyleElement API | StyleElement media property
- HTML | <style> media Attribute
- HTML | <area> media Attribute
- HTML | <link> media Attribute
- HTML | <source> media Attribute
- HTML | <a> media Attribute
- HTML | media attribute
- Create a Sticky Social Media Bar using HTML and CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.