List Groups
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Sizes
- First Item
- Second Item
- Third Item
- First Item
- Second Item
- Third Item
- First Item
- Second Item
- Third Item
<div class="row">
<div class="col-md-4">
<ul class="list-group list-group-sm">
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> First Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Second Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Third Item</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> First Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Second Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Third Item</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-group list-group-lg">
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> First Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Second Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Third Item</li>
</ul>
</div>
</div>Minimal
- First Item
- Second Item
- Third Item
<ul class="list-group list-group-minimal">
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> First Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Second Item</li>
<li class="list-group-item d-flex align-items-center"><i class="icon-check text-primary mr-2"></i> Third Item</li>
</ul>