Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template

List & Media

THIS MONTH

$58,356

LAST MONTH

$48,356

Basic example

 
  <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

Linked items

    
  <div class="list-group">

  <a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a>
  <a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="javascript:void(0)" class="list-group-item">Morbi leo risus</a>
  <a href="javascript:void(0)" class="list-group-item">Porta ac consectetur ac</a>
  <a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a>
</div>

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

With Badges

    
      <ul class="list-group list-group-full">

        <li class="list-group-item">

          <span class="badge badge-success">6</span> Cras justo odio
        </li>

        <li class="list-group-item">

          Dapibus ac facilisis in
        </li>

        <li class="list-group-item">

          <span class="badge badge-danger">3</span> Morbi leo risus
        </li>

        <li class="list-group-item active">

          <span class="badge badge-info">10</span> Porta ac consectetur ac
        </li>

        <li class="list-group-item">

          Vestibulum at eros
        </li>


      </ul>

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

Button items

Disabled items

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

Disabled items

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros
Vestibulum at eros

Media object

List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.