Twitter Bootstrap Question posted in

In Bootstrap v5.0.0-alpha1 what can I use for media (BS 3/4)?-Twitter bootstrap

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.com/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.com/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.

Tags:

3

Answers


  1. 0

    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.com/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.com/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>
    Login or Signup to reply.
  2. 0

    Bootstrap 5’s documentation illustrates how to use the Cards to achieve the old Media Object layout. https://getbootstrap.com/docs/5.0/components/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.org/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>
    Login or Signup to reply.
  3. 0

    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.com/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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search