I want to use a media object in Bootstrap v5.0.0-alpha1, but how?

In Bootstrap 3 & 4, I'm using it like this:

<link rel="stylesheet" href=".5.2/css/bootstrap.min.css">

<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
    <img src=".png" alt="John Doe"
         class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
        <h4>John Doe <small>Posted on February 19, 2016</small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
    </div>
</div>
</div>

I want to use a media object in Bootstrap v5.0.0-alpha1, but how?

In Bootstrap 3 & 4, I'm using it like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
    <img src="https://cdn.pixabay./photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
         class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
        <h4>John Doe <small>Posted on February 19, 2016</small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
    </div>
</div>
</div>

In v5.0.0-alpha1, which class can I use for a media object? I was unable to find any class named 'media' in Bootstrap 5.

• javascript
• html
• css
• twitter-bootstrap
• bootstrap-5

3 Answers 3

Since Bootstrap dropped the "media object" in version 5, you will have to use the utility classes instead.

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"/>

<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object without .media and .media-body classes (BS5):</p>
<div class="d-flex border p-3">
    <img src="https://cdn.pixabay./photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
         class="flex-shrink-0 me-3 mt-3 rounded-circle" style="width:60px;height:60px;">
    <div>
        <h4>John Doe <small>Posted on February 19, 2016</small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
    </div>
</div>
</div>

Bootstrap 5's documentation illustrates how to use the Cards to achieve the old Media Object layout. https://getbootstrap./docs/5.0/ponents/card/#horizontal

For example:

<div class="card mb-3 border-0">
    <div class="row g-3">
        <div class="col-md-4">
            <svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg> 
        </div>
        <div class="col-md-8">
            <div class="card-body p-0">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>

For those of you who are just using the grid parts of Bootstrap, you could achieve a media object layout like this:

  <figure class="row">
    <p class="col-auto">
      <img src="https://placeimg./100/100/animals" alt="A cute animal">
    </p>
    <figcaption class="col">Look at the cute animal</figcaption>
  </figure>

col-auto shrink-wraps the column to the width of the content (in the above example, an image) and col simply takes up (or distributes, if there's more than one) the remaining space. See the documentation, for more information.