0
0
Bootsrapmarkup~5 mins

Why media components enhance content in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Media components help show pictures, videos, or sounds alongside text. This makes content easier to understand and more interesting.

When you want to add a profile picture next to a person's name and description.
When you need to show a video with a caption or explanation.
When you want to display an icon or image next to a list of features.
When you want to combine text and media in a clean, organized way.
When you want your content to look good on phones and computers.
Syntax
Bootsrap
<div class="media">
  <img src="image.jpg" class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Content text goes here.
  </div>
</div>

The media class creates a container for media and text.

Use media-body for the text part next to the media.

Examples
This example shows a user avatar image next to their name and bio.
Bootsrap
<div class="media">
  <img src="avatar.png" class="align-self-center mr-3" alt="User avatar">
  <div class="media-body">
    <h5>User Name</h5>
    <p>This is a short user bio.</p>
  </div>
</div>
This example shows a video player next to a title and description.
Bootsrap
<div class="media">
  <video class="mr-3" controls width="150">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="media-body">
    <h5>Video Title</h5>
    <p>Description of the video content.</p>
  </div>
</div>
Sample Program

This complete example uses Bootstrap's media component to show an image next to text inside a bordered box. It is responsive and looks neat on all screen sizes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Media Component Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <h2>Media Component Example</h2>
    <div class="media border p-3">
      <img src="https://via.placeholder.com/64" class="align-self-start mr-3" alt="Placeholder image">
      <div class="media-body">
        <h5 class="mt-0">Sample Media Heading</h5>
        <p>This is some example text next to the image. It shows how media components keep content organized and visually appealing.</p>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Bootstrap 5 replaced the .media component with utilities like Flexbox, but you can still create similar layouts using d-flex and spacing classes.

Always add alt text to images for accessibility.

Use margin classes like mr-3 (margin-right) to add space between media and text.

Summary

Media components combine images, videos, or sounds with text to make content clearer and more engaging.

They help organize content so it looks neat and works well on different devices.

Bootstrap provides easy classes to create media layouts quickly and accessibly.