List & Media Object
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> 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> - 6 Cras justo odio
- Dapibus ac facilisis in
- 3 Morbi leo risus
- 10 Porta ac consectetur ac
- Vestibulum at eros
Button items
Disabled items
Disabled items
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
- Vestibulum at eros
Media Object
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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 commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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 commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Custom content
Fancy Listing, just put class to ul common-list
Service Panel
- Choose other demos
