The Bootstrap Media Objects like images or videos can be aligned to the left or to the right of some 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.
The media object classes available are:
Bootstrap spacing is used to controlled padding and margin.
Left and Right Alignment
- “media-left” class is used to left-align a media object.
- “media-right” class is used to right-align the media object.
- “media-body” class is used to place the content.
<div class="media-left"> <img src="..."> </div> <div class="media-body"> Content to be placed </div>
Below program illustrate the left and right alignment:
Top, Middle or Bottom Alignment:
- Similar to left and right alignment media object can be aligned top, middle, or bottom.
- To aligned media to top, middle or bottom use the following classes – media-top, media-middle or media-bottom class
<div class="media-top"> <img src="..."> </div> <div class="media-body"> Content to be placed </div>
Below program illustrate the above approach:
- If you want one media under the second media, for that you can use the nesting in the media objects
- Nested .media can be placed within the parent media object’s .media-body class.
<div class="media-left"> <img src="..."> <div class="media-left"> Content to be placed </div> </div>
- Bootstrap 4 | Media Objects
- Bootstrap | Media queries
- Popovers in bootstrap with examples
- Containers in Bootstrap with examples
- Borders in bootstrap with examples
- Spacing in Bootstrap with Examples
- Bootstrap Buttons with Examples
- Extract unique objects by attribute from array of objects.
- Colors and gradients in bootstrap with examples
- Visibility of elements in bootstrap with Examples
- Display Property in Bootstrap with Examples
- Input Groups in Bootstrap with Examples
- Flexbox utilities in bootstrap with examples
- Bootstrap | Float utilities with Examples
- Bootstrap | figure class with Examples
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.