Basic media styling


Text only

Single line text

<div class="media media-single">
  <p>Single line text</p>
</div>
Title only
Single line title
<div class="media media-single">
  <h5>Single line title</h5>
</div>
With icon
You'll love WrapAdmin
<div class="media media-single">
  <span class="ti-heart"></span>
  <span class="title">You'll love WrapAdmin n</span>
</div>
With icon - right
You'll love WrapAdmin
<div class="media media-single">
  <span class="title">You'll love WrapAdmin </span>
  <span class="ti-heart"></span>
</div>
Action icon
Item to delete
<div class="media media-single">
  <span class="title">Item to delete</span>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Visible action icon
Item to delete
<div class="media media-single media-action-visible">
  <span class="title">Item to delete</span>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Multiple actions
Editable product
<div class="media media-single">
  <span class="title">Editable product</span>
  <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Dot tag
Inbox
<div class="media media-single">
  <span class="badge badge-dot badge-danger"></span>
  <span class="title">Inbox</span>
</div>
Ring tag
Inbox
<div class="media media-single">
  <span class="badge badge-ring badge-success"></span>
  <span class="title">Inbox</span>
</div>
Number tag
Inbox 6
<div class="media media-single">
  <span class="title">Inbox</span>
  <span class="badge badge-pill badge-info">6</span>
</div>
Avatar
... Flora L. Cherry
<div class="media media-single">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <span class="title">Flora L. Cherry</span>
</div>
Avatar and actions
<div class="media media-single">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <a class="title hover-primary" href="#"><strong>Flora L. Cherry</strong></a>
  <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Iconic avatar
New user registered
<div class="media media-single">
  <span class="avatar avatar-sm bg-success"><i class="ti-user"></i></span>
  <span class="title">
    New user registered
    <time class="sidetitle" datetime="2018-07-14 20:00">24 mins ago</time>
  </span>
</div>
Separated time
New user registered
<div class="media media-single">
  <span class="avatar avatar-sm bg-success"><i class="ti-user"></i></span>
  <span class="title">New user registered</span>
  <time datetime="2018-07-14 20:00">24 mins ago</time>
</div>
Checkbox
<div class="media media-single">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description strike-on-check">A strick on checkbox description</span>
  </label>
</div>
Checkbox - right
Checkbox on the right side
<div class="media media-single">
  <span class="title">Checkbox on the right side</span>
  <label class="custom-control custom-control-lg custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
  </label>
</div>
Selectable item
... Flora L. Cherry
<div class="media media-single" data-provide="selectable">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <span class="title">Flora L. Cherry</span>
  <label class="custom-control no-border custom-control-lg custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
  </label>
</div>
Switch

Enable notifications

<div class="media media-single">
  <p class="title">Enable notifications</p>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="switch-indicator"></span>
  </label>
</div>
Dropdown
<div class="media media-single">
  <p class="title">Vito B. Coplin</p>
  <div class="dropdown">
    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></span>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#"><i class="ti-user"></i> Profile</a>
      <a class="dropdown-item" href="#"><i class="ti-settings"></i> Settings</a>
      <a class="dropdown-item" href="#"><i class="ti-help"></i> Help</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="ti-power-off"></i> Logout</a>
    </div>
  </div>
</div>
Advanced Media Styling


Text only

Vito B. Coplin

Front-end Developer

<div class="media">
  <div class="media-body">
    <p><strong>Vito B. Coplin</strong></p>
    <p>Front-end Developer</p>
  </div>
</div>
With icon

(650) 555 - 1234

Mobile

<div class="media">
  <span class="fa fa-phone lead text-info"></span>
  <div class="media-body">
    <p><strong>(650) 555 - 1234</strong></p>
    <p>Mobile</p>
  </div>
</div>
With icon - right

thethemes@gmail.com

Work

<div class="media">
  <div class="media-body">
    <p><strong>thethemes@gmail.com</strong></p>
    <p>Work</p>
  </div>
  <span class="fa fa-envelope lead text-info"></span>
</div>
Vertically centered

(650) 555 - 1234

Mobile

<div class="media align-items-center">
  <span class="fa fa-phone lead text-info"></span>
  <div class="media-body">
    <p><strong>(650) 555 - 1234</strong></p>
    <p>Mobile</p>
  </div>
</div>
Switch

Notifications

Turn on to receive alerts

<div class="media">
  <div class="media-body">
    <p><strong>Notifications</strong></p>
    <p>Turn on to receive alerts</p>
  </div>

  <label class="switch">
    <input type="checkbox" checked>
    <span class="switch-indicator"></span>
  </label>
</div>
Checkbox

Notifications

Turn on to receive alerts

<div class="media">
  <div class="media-left">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" checked>
      <span class="custom-control-indicator"></span>
    </label>
  </div>
  <div class="media-body">
    <p><strong>Notifications</strong></p>
    <p>Turn on to receive alerts</p>
  </div>
</div>
Selectable

Notifications

Turn on to receive alerts

<div class="media" data-provide="selectable">
  <div class="media-left">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
    </label>
  </div>
  <div class="media-body">
    <p><strong>Notifications</strong></p>
    <p>Turn on to receive alerts</p>
  </div>
</div>
Avatar
...

Flora L. Cherry

Administrator

<div class="media">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong></p>
    <p>Administrator</p>
  </div>
</div>
Avatar and actions
...

Flora L. Cherry

Owner

<div class="media align-items-center">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong></p>
    <p>Owner</p>
  </div>
  <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Avatar and button
...

Flora L. Cherry

@m.amiri

<div class="media align-items-center">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong></p>
    <p>@m.amiri</p>
  </div>
  <div>
    <a class="btn btn-sm btn-twitter btn-outline" href="#">Follow</a>
  </div>
</div>
Iconic avatar

New user registered

<div class="media align-items-center">
  <span class="avatar avatar-sm bg-primary"><i class="fa fa-user"></i></span>
  <div class="media-body">
    <p>New user registered</p>
    <time datetime="2018-07-14 20:00">24 min ago</time>
  </div>
</div>
Iconic avatar with action

Photos

<div class="media align-items-center">
  <span class="avatar avatar-sm bg-primary"><i class="fa fa-folder"></i></span>
  <div class="media-body">
    <p><strong>Photos</strong></p>
    <time datetime="2018-07-14 20:00">Aug 17, 2016</time>
  </div>
  <div>
    <a class="hover-info" href="#" data-provide="tooltip" title="More info"><i class="fa fa-info"></i></a>
  </div>
</div>
With time
...

Flora L. Cherry

Updated his profile picture

<div class="media">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong> <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time></p>
    <p>Updated his profile picture</p>
  </div>
</div>
Multi line description
...

Flora L. Cherry

You need to update the changelog in documentation before we release the current version.

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong> <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time></p>
    <p>You need to update the changelog in documentation before we release the current version.</p>
  </div>
</div>
Truncated description
...

Flora L. Cherry

You need to update the changelog in documentation before we release the current version.

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong> <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time></p>
    <p class="text-truncate">You need to update the changelog in documentation before we release the current version.</p>
  </div>
</div>
Multi line with title
...

BBQ this weekend?

Flora L. Cherry

I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p>
      <strong>BBQ this weekend?</strong>
      <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time>
    </p>
    <p class="fs-14 semibold">Flora L. Cherry</p>
    <p>I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?</p>
  </div>
</div>
Multi line with title
...

BBQ this weekend? (4)

Flora L. Cherry I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p>
      <strong>BBQ this weekend?</strong>
      <small class="pl-1"><strong>(4)</strong></small>
    </p>
    <p>
      <strong class="fs-14 semibold">Flora L. Cherry</strong>
      <span class="dash"></span>
      I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?
    </p>
  </div>
</div>
Button actions
...

Flora L. Cherry

You need to update the changelog in documentation before we release the current version.

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong> <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time></p>
    <p>You need to update the changelog in documentation before we release the current version.</p>
    <div class="btn-spacer mt-1">
      <a class="btn btn-xs btn-w-xs btn-outline btn-success" href="#">Approve</a>
      <a class="btn btn-xs btn-w-xs btn-outline btn-danger" href="#">Delete</a>
    </div>
  </div>
</div>
Link actions
...

Flora L. Cherry

You need to update the changelog in documentation before we release the current version.

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong> <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time></p>
    <p>You need to update the changelog in documentation before we release the current version.</p>
    <div class="media-block-actions">
      <nav class="nav nav-dot-separated">
        <a class="nav-link" href="#">Comments (2)</a>
        <a class="nav-link" href="#">likes (7)</a>
      </nav>

      <nav class="nav fs-16">
        <a class="nav-link" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
        <a class="nav-link" href="#" data-provide="tooltip" title="Delete"><i class="ti-trash"></i></a>
      </nav>
    </div>
  </div>
</div>
Link actions
...

Flora L. Cherry

You need to update the changelog in documentation before we release the current version.

<div class="media">
  <span class="avatar status-success">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="media-body">
    <p><strong>Flora L. Cherry</strong> <time class="float-right" datetime="2018-07-14 20:00">24 min ago</time></p>
    <p>You need to update the changelog in documentation before we release the current version.</p>
    <div class="media-block-actions">
      <nav class="nav nav-dot-separated">
        <a class="nav-link" href="#">Comments (2)</a>
        <a class="nav-link" href="#">likes (7)</a>
      </nav>

      <nav class="nav fs-16 media-hover-show">
        <a class="nav-link" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
        <a class="nav-link" href="#" data-provide="tooltip" title="Delete"><i class="ti-trash"></i></a>
      </nav>
    </div>
  </div>
</div>
Notification
Done!
You task has been completed.
<div class="media flex-column text-center p-40">
  <span class="avatar avatar-xxl bg-success opacity-60 mx-auto">
    <i class="ti-check fs-35 align-sub"></i>
  </span>
  <h6 class="text-uppercase fw-500 mt-3">Done!</h6>
  <small>You task has been completed.</small>
</div>
Image preview
...
Avatar.jpg
<div class="media flex-column w-200px h-250px b-1 p-0">
  <span class="m-auto p-2">
    <img src="../assets/images/avatar/avatar-1.png" alt="...">
  </span>
  <div class="flexbox bg-pale-secondary bt-1 border-light px-12 py-10 w-100">
    <span class="flex-grow">Avatar.jpg</span>
    <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
    <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
  </div>
</div>
File preview
colors.jpg

Size: 80kb Type: jpg

<div class="media align-items-center">
  <span>
    <i class="ti-file fs-30 text-info"></i>
  </span>
  <div class="media-body">
    <h5>colors.jpg</h5>
    <p class="gap-items">
      <small>Size: 80kb</small>
      <small>Type: jpg</small>
    </p>
  </div>
  <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
File preview

WrapAdmin-v1.zip

2 mb Download
<div class="media flex-column align-items-center text-center">
  <i class="ti-zip text-secondary fs-45 mb-3"></i>
  <p class="fw-600">WrapAdmin-v1.zip</p>
  <em class="text-fader mb-3">2 mb</em>
  <a class="btn btn-bold btn-block btn-cyan" href="#">Download</a>
</div>
Color media styling


Background color

Apply .media-inverse and .bg-* utility class to .media.


Change the background and see the result

<div class="media media-inverse bg-primary">
  <p>Change the background and see the result</p>
</div>
Pale background color

.bg-pale-* utility class applies to .media.


Change the background and see the result

<div class="media bg-pale-primary">
  <p>Change the background and see the result</p>
</div>
New media

.media-new applies to .media. Use this class to distinguish a new media from other medias in a media-list.

Single line item

<div class="media media-new">
  <p>Single line item</p>
</div>
Bordery

Use border utility classes to add a border with a specific color to any side.

Single line item

<div class="media bl-3 border-primary">
  <p>Single line item</p>
</div>
Basic list styling

Basically, you should wrap your .medias inside a .media-list to have a better control over them.



Default

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Divided

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Hoverable

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Divided and hoverable

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Striped

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Bordered

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland
Sizes

6 different sizes from xs to xxl.



Extra small

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Small

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Default

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Large

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Extra large

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Extra extra large

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland
Advanced lists

See more features of our media-lists.



Scrollable

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland
... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler

Drag and drop

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Header and footer

Media header
... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
Media footer

Selectable

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
... Christine C. McFarland

Selectall

Select users
... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella

Searchable

... Flora L. Cherry
... Vito B. Coplin
... Martha H. Cutler
... Tracy J. Hanzella
Grid media styling


Basic

fa fa-apple
fa fa-google
fa fa-windows
fa fa-facebook

Hover

fa fa-apple
fa fa-google
fa fa-windows
fa fa-facebook

Bordered

fa fa-apple
fa fa-google
fa fa-windows
fa fa-facebook

Sizing

By default, medias inside a .media-grid have 200px width. You can change it by adding a fixed width or using Bootstrap grid system.

Fixed sizing

Change grid items width to different sizes using .w-*px utility classes. It should apply to all of the medias.

fa fa-apple
fa fa-google
fa fa-windows
fa fa-facebook

Bootstrap grid system

.row applied to .media-grid and wrap each .media inside .col-6 .col-md-3.

fa fa-apple
fa fa-google
fa fa-windows
fa fa-facebook