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>

          

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>

          
  • User Image
    The stars are twinkling.

    Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.

  • User Image
    This is a Japanese doll.

    Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so.

  • User Image
    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.

  • User Image
    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>


          
  • User Image
    The stars are twinkling.

    Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.

  • User Image
    This is a Japanese doll.

    Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so.

  • User Image
    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.

  • User Image
    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>

          

Contacts

Add New