9.media objects

• media object

<div class="media">
    <img class="mr-3 mt-3" src="https://source.unsplash.com/random/90x90">
    <div class="media-body">
        <h5>Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
        odio, vestibulum in
        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
        congue
        felis in faucibus.
    </div>
</div>

• nesting media objects

<div class="media">
    <img class="mr-3" src="https://source.unsplash.com/random/90x91">
    <div class="media-body">
        <h5>Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
        odio, vestibulum in
        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
        congue
        felis in faucibus.

        <div class="media">
            <a class="mr-3" href="#">
                <img src="https://source.unsplash.com/random/90x92">
            </a>
            <div class="media-body">
                <h5>Nested Media</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
                lacinia
                congue felis in faucibus.
            </div>
        </div>
    </div>
</div>

• top aligned(default)

<div class="media">
    <img class="mr-3 align-self-start" src="https://source.unsplash.com/random/90x93">
    <div class="media-body">
        <h5>Top aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
            purus odio,
            vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
            fringilla.
            Donec lacinia congue felis in faucibus.</p>
    </div>
</div>

• center aligned

<div class="media">
    <img class="mr-3 align-self-center" src="https://source.unsplash.com/random/90x94">
    <div class="media-body">
        <h5>Center aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
            purus odio,
            vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
            fringilla.
            Donec lacinia congue felis in faucibus.</p>
    </div>
</div>

• bottom aligned

<div class="media">
    <img class="mr-3 align-self-end" src="https://source.unsplash.com/random/90x95">
    <div class="media-body">
        <h5>Bottom aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
            purus odio,
            vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
            fringilla.
            Donec lacinia congue felis in faucibus.</p>
    </div>
</div>

• media list

<ul class="list-unstyled">
    <li class="media">
        <img class="mr-3" src="https://source.unsplash.com/random/90x96">
        <div class="media-body">
            <h5>List based media object</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
            purus odio, vestibulum in
            vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
            lacinia
            congue felis in faucibus.
        </div>
    </li>
    <li class="media">
        <img class="mr-3" src="https://source.unsplash.com/random/90x97">
        <div class="media-body">
            <h5>List based media object</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
            purus odio, vestibulum in
            vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
            lacinia
            congue felis in faucibus.
        </div>
    </li>
    <li class="media">
        <img class="mr-3" src="https://source.unsplash.com/random/90x98">
        <div class="media-body">
            <h5>List based media object</h5>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
            purus odio, vestibulum in
            vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
            lacinia
            congue felis in faucibus.
        </div>
    </li>
</ul>