List Group
These modular elements can be readily used and customized in every layout across pages.
For detail documentation, View List Group on Bootstrap
Basic Example
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<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>Active Item
<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#">Cras justo odio</a>
<a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
<a class="list-group-item list-group-item-action" href="#">Morbi leo risus</a>
<a class="list-group-item list-group-item-action" href="#">Porta ac consectetur ac</a>
<a class="list-group-item list-group-item-action disabled" href="#">Vestibulum at eros</a>
</div>List group flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
<ul class="list-group list-group-flush">
<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>
</ul>List group with badge
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
- Dapibus ac facilisis in9
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio<span class="badge badge-soft-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-soft-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-soft-primary badge-pill">1</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in<span class="badge badge-soft-primary badge-pill">9</span></li>
</ul>Contextual classes
- 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
<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>Custom content
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<div class="list-group">
<a class="list-group-item list-group-item-action flex-column align-items-start active" href="#">
<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">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 class="list-group-item list-group-item-action flex-column align-items-start" href="#">
<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 class="list-group-item list-group-item-action flex-column align-items-start" href="#">
<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>