Bootstrap Media Objects
You will discover in this lesson how to construct media objects in Bootstrap.
Using the Media Object in Bootstrap
Starting from version 5, Bootstrap has discontinued the use of the media object. However, you can still achieve a similar layout by incorporating left- or right-aligned media objects like images or videos alongside textual content such as blog comments or Tweets, utilizing the flex and spacing utility classes.
<div class="m-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="media-object1.png" alt="A Sample pic" />
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Exceptional trait! My favorite. I'm planning to employ this Bootstrap component at some point, and I'll let you know when I do.</p>
</div>
</div>
</div>
Additionally, you have the flexibility to create various other versions of media objects. By applying image modifier classes like .rounded or .rounded-circle to the image, you can create rounded corner or circular images.
<div class="m-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="media-object1.png" class="rounded-circle" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>fantastic trait Love it. Undoubtedly, I'll utilize this Bootstrap component at some point in the future, and I'll let you know when I do.</p>
</div>
</div>
</div>
Creating Nested Media Objects
Media objects can also be nested within one another, offering practicality in constructing comment threads within a blog post. An example illustrates this concept:
<div class="m-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="media-object1.png" class="rounded-circle" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent quality! My preferred. At some time, I want to use this Bootstrap component, and I'll let you know when I do.</p>
<!-- Nested media object -->
<div class="d-flex mt-4">
<div class="flex-shrink-0">
<img src="media-object2.png" class="rounded-circle" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Clark Kent <small class="text-muted"><i>Posted on January 12, 2021</i></small></h5>
<p>I'm glad you found this part helpful. Don't forget to look at further Bootstrap components. They are likewise really helpful.</p>
</div>
</div>
</div>
</div>
</div>
Alignment of Media Objects
Moreover, adjusting the horizontal alignment of content and media is simple by making tweaks directly to the HTML code, as demonstrated in the following example.
<div class="m-4">
<div class="d-flex">
<div class="flex-grow-1 me-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent quality! My preferred. At some time, I want to use this Bootstrap component, and I'll let you know when I do.</p>
</div>
<div class="flex-shrink-0">
<img src="media-object1.png" width="80" height="80" alt="Sample Image">
</div>
</div>
</div>
Furthermore, you can use flexbox utility classes to align images or other media elements at the middle or bottom of the content block. For instance, the class .align-self-center achieves vertical center alignment, while .align-self-end accomplishes bottom alignment.
By default, the media inside a media object is top-aligned. Refer to the provided example for a visual representation.
<div class="m-4">
<!--Top aligned media-->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="media-object1.png" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Top aligned media <small class="text-muted"><i>This is Default</i></small></h5>
<p>Excellent quality! My preferred. At some time, I want to use this Bootstrap component, and I'll let you know when I do.</p>
<p>I'm glad you found this part helpful. Don't forget to look at further Bootstrap components. They are likewise really helpful.</p>
<p>fantastic trait Love it. Undoubtedly, I'll utilize this Bootstrap component at some point in the future, and I'll let you know when I do.</p>
</div>
</div>
FAQ
What are Bootstrap Media Objects?
Bootstrap Media Objects are a component that allows you to display media content such as images, videos, and text in a structured and well-aligned manner. They consist of an image or video on the left, along with related textual content on the right.
How do you create a basic Bootstrap Media Object?
To create a basic Bootstrap Media Object, you need an HTML structure with the media class, and within it, the media-body class to contain the textual content:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object Title</h5>
<p>This is the content of the media object.</p>
</div>
</div>
What is the purpose of the mr-3 class in a Bootstrap Media Object?
The mr-3 class is a Bootstrap margin utility class that adds right margin to the element. In the context of a Media Object, it creates space between the media (image) and the media-body content.
How can you align the image or video to the right of the textual content in a Media Object?
To align the image or video to the right of the textual content, you can use the order utility classes along with flex utility classes:
<div class="media">
<div class="media-body">
<h5 class="mt-0">Media Object Title</h5>
<p>This is the content of the media object.</p>
</div>
<img src="image.jpg" class="ml-3 align-self-end" alt="Image">
</div>
In this example, the align-self-end class aligns the image at the bottom.
How can you nest additional media objects within a Bootstrap Media Object?
You can nest media objects within a Bootstrap Media Object by using the media class within the media-body container:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Parent Media Object</h5>
<p>This is the content of the parent media object.</p>
<div class="media">
<img src="image2.jpg" class="mr-3" alt="Nested Image">
<div class="media-body">
<h5 class="mt-0">Nested Media Object</h5>
<p>This is the content of the nested media object.</p>
</div>
</div>
</div>
</div>
How can you create a Bootstrap Media Object with a video instead of an image?
You can replace the img tag with the video tag and specify the source of the video:
<div class="media">
<video class="mr-3" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="media-body">
<h5 class="mt-0">Video Media Object</h5>
<p>This is a video media object.</p>
</div>
</div>
How can you create a list of Bootstrap Media Objects?
You can create a list of Bootstrap Media Objects by repeating the media structure within a list-group container:
<div class="list-group">
<div class="media">
<img src="image1.jpg" class="mr-3" alt="Image 1">
<div class="media-body">
<h5 class="mt-0">Media Object 1</h5>
<p>Content of media object 1.</p>
</div>
</div>
<div class="media">
<img src="image2.jpg" class="mr-3" alt="Image 2">
<div class="media-body">
<h5 class="mt-0">Media Object 2</h5>
<p>Content of media object 2.</p>
</div>
</div>
<!-- Add more media objects here -->
</div>
How can you add a border to a Bootstrap Media Object?
You can add a border to a Bootstrap Media Object by using the border utility class:
<div class="media border">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object with Border</h5>
<p>This media object has a border.</p>
</div>
</div>
How can you create a Bootstrap Media Object with a background color?
You can apply a background color to a Bootstrap Media Object using the bg-* utility classes:
<div class="media bg-primary text-white">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object with Background</h5>
<p>This media object has a background color.</p>
</div>
</div>
How can you vertically align content within a Bootstrap Media Object?
You can use flex utility classes to vertically align content within a Bootstrap Media Object:
<div class="media align-items-center">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object with Vertical Alignment</h5>
<p>This media object has vertically aligned content.</p>
</div>
</div>
How can you create a Bootstrap Media Object that is horizontally aligned?
To create a horizontally aligned Bootstrap Media Object, you can use the d-flex class along with utility classes for alignment:
<div class="media d-flex align-items-center">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Horizontally Aligned Media Object</h5>
<p>This media object is horizontally aligned.</p>
</div>
</div>
How can you make the textual content in a Bootstrap Media Object larger?
You can use utility classes like display-4 to increase the font size of the textual content:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Larger Text in Media Object</h5>
<p class="display-4">This text is larger than usual.</p>
</div>
</div>
How can you create a responsive Bootstrap Media Object?
By default, Bootstrap Media Objects are responsive. They will adjust their layout and alignment based on screen size:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Responsive Media Object</h5>
<p>This media object is responsive.</p>
</div>
</div>
How can you make the image or video in a Bootstrap Media Object larger?
You can use the img-fluid class for images and the w-100 class for videos to make them resize automatically to fit their container:
<div class="media">
<img src="image.jpg" class="mr-3 img-fluid" alt="Image">
<div class="media-body">
<h5 class="mt-0">Larger Image in Media Object</h5>
<p>This image will resize to fit the container.</p>
</div>
</div>
For videos:
<div class="media">
<video class="mr-3 w-100" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="media-body">
<h5 class="mt-0">Larger Video in Media Object</h5>
<p>This video will resize to fit the container.</p>
</div>
</div>
How can you create a Bootstrap Media Object that stacks on smaller screens?
By default, Bootstrap Media Objects will stack on smaller screens due to the responsive nature of Bootstrap's grid system:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Stacked Media Object on Small Screens</h5>
<p>This media object will stack on small screens.</p>
</div>
</div>
How can you add a link to a Bootstrap Media Object?
You can wrap the entire Media Object in an anchor (a) tag to make the whole object clickable:
<a href="#" class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Clickable Media Object</h5>
<p>Click anywhere on this media object.</p>
</div>
</a>
How can you make the image or video in a Bootstrap Media Object circular?
You can add the rounded-circle class to the image or video:
<div class="media">
<img src="image.jpg" class="mr-3 rounded-circle" alt="Circular Image">
<div class="media-body">
<h5 class="mt-0">Circular Image in Media Object</h5>
<p>This image is circular.</p>
</div>
</div>
For videos:
<div class="media">
<video class="mr-3 rounded-circle" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="media-body">
<h5 class="mt-0">Circular Video in Media Object</h5>
<p>This video is circular.</p>
</div>
</div>
How can you add additional metadata or information to a Bootstrap Media Object?
You can include additional metadata or information within the media-body:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object with Additional Information</h5>
<p>This media object has additional information:</p>
<ul>
<li>Author: John Doe</li>
<li>Published on: August 1, 2023</li>
</ul>
</div>
</div>
How can you change the text color in a Bootstrap Media Object?
You can use Bootstrap's text color utility classes to change the color of the textual content:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body text-danger">
<h5 class="mt-0">Media Object with Red Text</h5>
<p>This text is in red color.</p>
</div>
</div>
Remember to refer to the official Bootstrap documentation for the most accurate and up-to-date information on classes and features.
How can you create a Bootstrap Media Object with a shadow around the image?
You can add the shadow class to the img tag to apply a shadow effect:
<div class="media">
<img src="image.jpg" class="mr-3 shadow" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object with Shadow</h5>
<p>This media object's image has a shadow effect.</p>
</div>
</div>
How can you create a Bootstrap Media Object with a border around the whole component?
You can add the border class to the media container to apply a border around the entire media component:
<div class="media border">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Object with Border</h5>
<p>This media object has a border around the whole component.</p>
</div>
</div>
How can you create a Bootstrap Media Object with text alignment to the right?
You can use the text-right class to align the textual content to the right within the media-body:
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body text-right">
<h5 class="mt-0">Right-Aligned Text in Media Object</h5>
<p>This text is aligned to the right.</p>
</div>
</div>
How can you create a Bootstrap Media Object that is centered both horizontally and vertically?
You can use flex utility classes to center the media object both horizontally and vertically:
<div class="media d-flex align-items-center justify-content-center">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Centered Media Object</h5>
<p>This media object is centered both horizontally and vertically.</p>
</div>
</div>
Conclusion
Bootstrap Media Objects represent a powerful and uncomplicated solution for presenting media content with finesse, seamlessly integrating images and text in a structured and responsive manner. The framework's commitment to providing a well-defined layout proves instrumental, allowing developers to effortlessly organize media elements alongside accompanying text. This capability becomes particularly invaluable when creating content blocks that are not only visually appealing but also maintain a sense of order and clarity.
Whether applied to the dynamic realm of blog posts, the informative landscape of news articles, or the interactive environment of social media feeds, Bootstrap Media Objects consistently contribute to enhanced readability and an enriched user experience across a spectrum of devices. The framework's inherent simplicity in implementation, coupled with its dedication to responsiveness, positions Bootstrap Media Objects as an enduringly valuable tool in the web development arsenal.
Through the seamless interplay of simplicity and responsiveness, Bootstrap Media Objects empower developers to transcend the challenges of presenting multimedia content. They facilitate the creation of engaging and aesthetically pleasing presentations, ensuring a user-friendly and visually harmonious experience that resonates across diverse digital platforms. In essence, Bootstrap Media Objects remain a stalwart companion in the pursuit of crafting compelling and organized multimedia content within the dynamic landscape of web development.