View on GitHub

Media list users

On this page

Examples

Jacob Thornton @fat - San Francisco
Dave Gamache @dhg - Palo Alto
Mark Otto @mdo - San Francisco

html

<ul class="media-list media-list-users list-group">
  <li class="list-group-item">
    <div class="media w-100">
      <img class="media-object rounded-circle me-3" src="/docs/assets/img/examples/avatar-fat.jpg" alt="Jacob Thornton avatar">
      <div class="media-body align-self-center">
        <button class="btn btn-outline-primary btn-sm float-end">Follow</button>
        <strong>Jacob Thornton</strong>
        <small>@fat - San Francisco</small>
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media w-100">
      <img class="media-object rounded-circle me-3" src="/docs/assets/img/examples/avatar-dhg.png" alt="Dave Gamache avatar">
      <div class="media-body align-self-center">
        <button class="btn btn-outline-primary btn-sm float-end">Follow</button>
        <strong>Dave Gamache</strong>
        <small>@dhg - Palo Alto</small>
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media w-100">
      <img class="media-object rounded-circle me-3" src="/docs/assets/img/examples/avatar-mdo.png" alt="Mark Otto avatar">
      <div class="media-body align-self-center">
        <button class="btn btn-outline-primary btn-sm float-end">Follow</button>
        <strong>Mark Otto</strong>
        <small>@mdo - San Francisco</small>
      </div>
    </div>
  </li>
</ul>

CSS

Sass variables

$media-list-users-margin-bottom: $spacer * .3;

$media-list-users-group-item-padding: $spacer * .9;

$media-list-users-object-width:        $spacer * 2.6;
$media-list-users-object-margin-right: $spacer * .3;

$media-list-users-body-secondary-color: $gray-500;

$media-list-users-btn-pull-right-margin-top: $spacer * .4;