View on GitHub

Media list conversation

On this page

Examples

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.

Dave Gamache at 4:20PM
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.

Fat at 4:28PM

html

<ul class="media-list media-list-conversation c-w-md">
  <li class="media media-current-user mb-4">
    <div class="media-body">
      <div class="media-body-text">
        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
      </div>
      <div class="media-footer">
        <small class="text-muted">
          <a href="#">Dave Gamache</a> at 4:20PM
        </small>
      </div>
    </div>
    <img class="rounded-circle media-object ml-3" src="/docs/assets/img/examples/avatar-dhg.png" alt="Dave Gamache avatar">
  </li>
  <li class="media mb-4">
    <img class="rounded-circle media-object mr-3" src="/docs/assets/img/examples/avatar-fat.jpg" alt="Fat avatar">
    <div class="media-body">
      <div class="media-body-text">
       Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
      </div>
      <div class="media-body-text">
       Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
      <div class="media-body-text">
       Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
      </div>
      <div class="media-footer">
        <small class="text-muted">
          <a href="#">Fat</a> at 4:28PM
        </small>
      </div>
    </div>
  </li>
</ul>

CSS

Sass variables

$media-list-conversation-object-width:                 $spacer * 2.6;
$media-list-conversation-object-height:                $media-list-conversation-object-width;
$media-list-conversation-object-margin-x:              $spacer * .3;

$media-list-conversation-body-text-padding-x:          $spacer * .9;
$media-list-conversation-body-text-padding-y:          $spacer * .6;
$media-list-conversation-body-text-bg:                 $gray-100;
$media-list-conversation-body-text-border-radius:      $border-radius-lg * 1.9;

$media-list-conversation-current-user-body-text-color: $white;
$media-list-conversation-current-user-body-text-bg:    $primary;