Media

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media.

This is based on flex model, so you can align media vertically by align-self-start, align-self-center, align-self-end classes.

Media objects can be nested.

css class description
media Defines media object, that can contains media such <img>. Usually this is <div> or <li>element. In last case remove default list style by the list-unstyled class.
media-body Defines container for non-media content.

example

  • Top-aligned media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.

  • Center-aligned media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.

  • Bottom-aligned media

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.

<ul class="list-unstyle"> 

  <li class="media border-bottom py-3">
    <img src="..." class="align-self-start mr-3" width="64" height="64">
    <div class="media-body">
       <h5 class="mt-0 mb-1">Top-aligned media</h5>
       <p>...</p>
       <p class="mb-0">...</p>
    </div>   
  </li>   
    
  <li class="media border-bottom py-3">
    <img src="..." class="align-self-center mr-3"  width="64" height="64">
    <div class="media-body">
       <h5 class="mt-0 mb-1">Center-aligned media</h5>
       <p>...</p>
       <p class="mb-0">...</p>
    </div>   
  </li>   
    
  <li class="media border-bottom py-3">
    <img src="..." class="align-self-end mr-3" width="64" height="64">
    <div class="media-body">
       <h5 class="mt-0 mb-1">Bottom-aligned media</h5>
       <p>...</p>
       <p class="mb-0">...</p>
    </div>   
  </li>
</ul>