BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Media Objects

In this tutorial you will learn how to use the Bootstrap media object component.

Using the Bootstrap Media Object

If you want to create a layout that contains left- or right-aligned media object like images or video alongside the textual content such as blog comments, Tweets, etc. you can do this easily using the newly introduced Bootstrap media component, like this:

<div class="media">
    <img src="images/avatar.svg" class="mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
        <p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
    </div>
</div>

— The output of the above example will look something like this:

You can also create other variation of the media component. Apply the image modifier classes like .rounded or .rounded-circle to the image to create rounded corner or circular image.

<div class="media">
    <img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
        <p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
    </div>
</div>

— The output of the above example will look something like this:


Creating Nested Media Objects

Media objects can also be nested inside other media object. It can be very useful for creating comment threads in a blog post. Here's is an example:

<div class="media">
    <img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
        <p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
        <!-- Nested media object -->
        <div class="media mt-2">
            <img src="images/avatar.svg" class="rounded-circle mr-3" alt="Sample Image">
            <div class="media-body">
                <h5 class="mt-0">Clark Kent <small><i>Posted on January 12, 2019</i></small></h5>
                <p>Thanks, you found this component useful. Don't forget to check out other Bootstrap components as well. They're also very useful.</p>
            </div>
        </div>
    </div>
</div>

— The output of the above example will look something like this:


Alignment of Media Objects

You can also change the horizontal alignment of content and media by simply tweaking the HTML code itself, as demonstrated in the following example:

<div class="media">    
    <div class="media-body">
        <h5 class="mt-0">Jhon Carter <small><i>Posted on January 10, 2019</i></small></h5>
        <p>This is really an excellent feature! I love it. One day I'm definitely going to use this Bootstrap media object component into my application.</p>
    </div>
    <img src="images/avatar.svg" class="ml-3" alt="Sample Image">
</div>

— The output of the above example will look something like this:

Besides that you can also align the images or other media at the middle or bottom of the content block using the flexbox utilities classes, for example, you can use the class .align-self-center for vertical center alignment, and the class .align-self-end for bottom alignment. By default, the media inside a media object is top aligned. Here's an example:

<!--Top aligned media-->
<div class="media">
    <img src="images/avatar.svg" class="mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Top aligned media <small><i>This is Default</i></small></h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
</div>
<hr>
<!--Middle aligned media-->
<div class="media">
    <img src="images/avatar.svg" class="align-self-center mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Middle Aligned Media</h5>
        <p>Vestibulum quis quam ut magna consequat faucibus aleo...</p>
    </div>
</div>
<hr>
<!--Bottom aligned media-->
<div class="media">
    <img src="images/avatar.svg" class="align-self-end mr-3" alt="Sample Image">
    <div class="media-body">
        <h5 class="mt-0">Bottom Aligned Media</h5>
        <p>Amet nibh libero, in gravida nulla. Nulla vel metus...</p>
    </div>
</div>

Creating a Media List

You can also create a media list using the HTML list elements and the media object classes. Just apply the class .list-unstyled on the <ul> or <ol> element, and the class .media on the child <li> element, as demonstrated in the following examples:

<ul class="list-unstyled">
    <li class="media">
        <img src="images/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">List-based media object</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
        </div>
    </li>
    <li class="media my-2">
        <img src="images/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">List-based media object</h5>
            <p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
        </div>
    </li>
    <li class="media">
        <img src="images/avatar.svg" class="mr-3" alt="Sample Image">
        <div class="media-body">
            <h5 class="mt-0">List-based media object</h5>
            <p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
        </div>
    </li>
</ul>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.