Media Object

HTML
Pug

<!-- Media on the Left -->
<div class="media">
  <img class="d-flex mr-3" src="path-to-image" width="64" alt="Media">
  <div class="media-body">
    <h6 class="mt-0 mb-1">Media heading</h6>
    <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
  </div>
</div>

<!-- Media on the Right -->
<div class="media">
  <div class="media-body text-right">
    <h6 class="mt-0 mb-1">Media heading</h6>
    <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
  </div>
  <img class="d-flex ml-3" src="path-to-image" width="64" alt="Media">
</div>

//- Media on the Left
.media
  img(src="path-to-image" width="64" alt="Media").d-flex.mr-3
  .media-body
    h6.mt-0.mb-1 Media heading
    span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

//- Media on the Right
.media
  .media-body.text-right
    h6.mt-0.mb-1 Media heading
    span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...
  img(src="path-to-image" width="64" alt="Media").d-flex.ml-3

HTML
Pug

<!-- Top-aligned Media -->
<div class="media">
  <img class="d-flex align-self-start mr-3" src="path-to-image" width="64" alt="Media">
  <div class="media-body">
    <h6 class="mt-0 mb-1">Top-aligned media</h6>
    <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
  </div>
</div>

<!-- Center-aligned Media -->
<div class="media">
  <img class="d-flex align-self-center mr-3" src="path-to-image" width="64" alt="Media">
  <div class="media-body">
    <h6 class="mt-0 mb-1">Center-aligned media</h6>
    <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
  </div>
</div>

<!-- Bottom-aligned Media -->
<div class="media">
  <img class="d-flex align-self-end mr-3" src="path-to-image" width="64" alt="Media">
  <div class="media-body">
    <h6 class="mt-0 mb-1">Bottom-aligned media</h6>
    <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
  </div>
</div>

//- Top-aligned Media
.media
  img(src="path-to-image" width="64" alt="Media").d-flex.align-self-start.mr-3
  .media-body
    h6.mt-0.mb-1 Top-aligned media
    span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

//- Center-aligned Media
.media
  img(src="path-to-image" width="64" alt="Media").d-flex.align-self-center.mr-3
  .media-body
    h6.mt-0.mb-1 Center-aligned media
    span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

//- Bottom-aligned Media
.media
  img(src="path-to-image" width="64" alt="Media").d-flex.align-self-end.mr-3
  .media-body
    h6.mt-0.mb-1 Bottom-aligned media
    span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

HTML
Pug

<!-- Media Objects List -->
<ul class="list-unstyled">

  <!-- Square Media (Default) -->
  <li class="media mb-4">
    <img class="d-flex mr-3" src="path-to-image" width="64" alt="Media">
    <div class="media-body">
      <h6 class="mt-0 mb-1">List-based media object</h6>
      <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
    </div>
  </li>

  <!-- Rounded Media -->
  <li class="media mb-4">
    <img class="d-flex rounded mr-3" src="path-to-image" width="64" alt="Media">
    <div class="media-body">
      <h6 class="mt-0 mb-1">List-based media object</h6>
      <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
    </div>
  </li>

  <!-- Circle Media -->
  <li class="media mb-4">
    <img class="d-flex rounded-circle mr-3" src="path-to-image" width="64" alt="Media">
    <div class="media-body">
      <h6 class="mt-0 mb-1">List-based media object</h6>
      <span class="d-block text-muted">Cras sit amet nibh libero, in gravida nulla...</span>
    </div>
  </li>
</ul>

//- Media Objects List
ul.list-unstyled

  //- Square Media (Default)
  li.media.mb-4
    img(src="path-to-image" width="64" alt="Media").d-flex.mr-3
    .media-body
      h6.mt-0.mb-1 List-based media object
      span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

  //- Rounded Media
  li.media.mb-4
    img(src="path-to-image" width="64" alt="Media").d-flex.rounded.mr-3
    .media-body
      h6.mt-0.mb-1 List-based media object
      span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

  //- Circle Media
  li.media.mb-4
    img(src="path-to-image" width="64" alt="Media").d-flex.rounded-circle.mr-3
    .media-body
      h6.mt-0.mb-1 List-based media object
      span.d-block.text-muted Cras sit amet nibh libero, in gravida nulla...

UI Kit

ALL

A-B

C-F

G-L

M-P

R-S

T-W

Order (Position)

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Duis aute irure dolor in reprehenderit.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Duis aute irure dolor in reprehenderit.

Alignment

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.lacinia congue felis in faucibus.

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.lacinia congue felis in faucibus.

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.lacinia congue felis in faucibus.

Media list + shape

List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Duis aute irure dolor in reprehenderit.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Duis aute irure dolor in reprehenderit.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Duis aute irure dolor in reprehenderit.