Bootstrap Media Objects
Bootstrap Media Objects
Bootstrap provides a component called media objects, which allows you to easily create media content with images, text, and other media elements. A media object typically consists of an image or video on the left, and text content on the right. Here’s an example of a media object in Bootstrap:
<div class="media">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="mr-3" alt="..." data-lazy-src="image.jpg"><noscript><img decoding="async" src="image.jpg" class="mr-3" alt="..."></noscript>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</div>
</div>
In this example, we have used the .media class to create a media object. We have added an image element using the <img> tag, and used the .mr-3 class to add some margin to the right of the image. The alt attribute provides alternative text for the image, which is important for accessibility.
We have also used the .media-body class to create a container for the text content of the media object. Inside the .media-body container, we have added a heading element using the <h5> tag, and some text content using the <p> tag.
You can customize the appearance of media objects by adjusting the margin and padding classes, or by adding additional content such as buttons or badges. Media objects can be useful for displaying blog posts, news articles, or other types of media content in your website or application.