Mono - Responsive Admin & Dashboard Template

Mono provides a variety of Bootstrap list group components with a little customization that suits its design standards. For more information, please see the official Bootstrap documentation.

List Items


<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Disabled List


<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

List Item Links


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Contextual Classes


<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

List Group With Avatars


<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-01.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">The stars are twinkling.</span>
        <p>Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months
          do things on
          at.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-02.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">This is a Japanese doll.</span>
        <p>Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye
          consisted so.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-03.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">Support Ticket</span>
        <p>Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only.
          Music
          leave say doors him.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-04.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">New Order</span>
        <p>Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened
          oh
          produced prospect formerly up am.</p>
      </div>
    </div>
  </li>
</ul>

The stars are twinkling.
Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.
This is a Japanese doll.
Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so.
Support Ticket
Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him.
New Order
Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am.

List Group With Icons


<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-primary">
        <i class="mdi mdi-star-outline"></i>
      </div>
      <div class="media-body">
        <span class="title">The stars are twinkling.</span>
        <p>Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months
          do things
          on at.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-success">
        <i class="mdi mdi-pencil"></i>
      </div>
      <div class="media-body">
        <span class="title">This is a Japanese doll.</span>
        <p>Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye
          consisted so.
        </p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-danger">
        <i class="mdi mdi-square-edit-outline"></i>
      </div>
      <div class="media-body">
        <span class="title">Support Ticket</span>
        <p>Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only.
          Music
          leave say doors him.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-info">
        <i class="mdi mdi-diamond-outline"></i>
      </div>
      <div class="media-body">
        <span class="title">New Order</span>
        <p>Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened
          oh
          produced prospect formerly up am.</p>
      </div>
    </div>
  </li>
</ul>

The stars are twinkling.
Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.
This is a Japanese doll.
Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so.
Support Ticket
Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him.
New Order
Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am.

List Item Active


<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

List with Badges


<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Lorem, ipsum dolor
    <span class="badge badge-primary badge-pill">10</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Sit amet consectetur
    <span class="badge badge-primary badge-pill">3</span>
  </li>
</ul>

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1
Lorem, ipsum dolor 10
Sit amet consectetur 3

List Item Buttons


<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">Cras justo odio</button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

List Group with Control


<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-01.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">The stars are twinkling.</span>
        <p>Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly
          months do things on
          at.</p>
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1"></label>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-02.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">This is a Japanese doll.</span>
        <p>Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye
          consisted so.</p>
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck2">
        <label class="custom-control-label" for="customCheck2"></label>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-03.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">Support Ticket</span>
        <p>Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof
          only. Music
          leave say doors him.</p>
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck3">
        <label class="custom-control-label" for="customCheck3"></label>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-04.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">New Order</span>
        <p>Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As
          hastened oh
          produced prospect formerly up am.</p>
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck4">
        <label class="custom-control-label" for="customCheck4"></label>
      </div>
    </div>
  </li>
</ul>

The stars are twinkling.
Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.
This is a Japanese doll.
Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so.
Support Ticket
Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him.
New Order
Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am.

List Group with Control


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 text-white">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1 text-white">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
      blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>