What is media object and explain there types in Bootstrap ?
In this article, we will learn about the Bootstrap media object, which is helpful to place the media alongside the text. Also, we will understand the various ways to use the media with text & its implementation through the examples. Media objects are the bootstrap component that helps to build repetitive design in Bootstrap where some media is positioned either in a left-aligned or right-aligned manner along with text content that does not wrap around the media. The media objects require two Bootstrap classes for the wrapping .media and .media-body content around it.
We will be using the Bootstrap CDN links to import them into the HTML file.
<!–Bootstrap CSS Link –>
<link rel=”stylesheet” href=”https://email@example.com/dist/css/bootstrap.min.css” integrity=”sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l” crossorigin=”anonymous”/>
<script src=”https://firstname.lastname@example.org/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”>
After adding the required CDN links, we will use the below simple code for media-object to our HTML file:
<div class="media"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20211025131754/GFGlogo2.jpg" class="align-self-end mr-3" alt="img" /> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p> Geeksforgeeks platform has been designed for every geek wishing to expand their knowledge, share their knowledge and is ready to grab their dream job. </p> </div> </div>
Example: This example describes simple media & media-body objects.
There are different types of media objects in Bootstrap.
Nested media object: We can make nested media-object inside Bootstrap. To make nested media object, we have to add media objects inside the .media-body class. In Nested media object, the .media can be placed inside the parent media object’s .media-body class.
<div class="media-left"> <img src="url"> <div class="media-left"> Content </div> </div>
Example: This example describes the nested media body objects.
- Alignment: We can align the media inside the media-object with the help of the flexbox utility classes. To align media to top, middle or bottom, we can use these classes: media-top, media-middle, or media-bottom class.
<div class="media-top"> <img src="url"> </div> <div class="media-body"> Content </div>
Example: This example describes the media-object aligned to the top, middle, or bottom of the media.
- Media object based list: In bootstrap, we can add media objects inside the list as the list-items, and use them to create a media object-based list.
<ul class="list-unstyled"> <li class="media"> <img src="url" /> <div class="media-body">Content</div> </li> </ul>
Example: This example describes the media object-based list.
The media object in Bootstrap is a very useful component that we can use for different purposes like making a Twitter clone where we can use to create posts, we can also use to create a news website clone where we can use this media object concept. Thus, media object makes our works very easy by positioning the media along with the text content in an ordered manner.
- Google Chrome
- Microsoft Edge