Bootstrap 4 List Groups
Most basic list groups are unordered lists.
To create a list group, on the<ul>element, add the.list-groupclass, and on the<li>element, add the.list-group-itemclass:
Example
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Try it Yourself »
Active list items
By adding the.activeclass to set the active list item:
Example
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Try it Yourself »
Disabled list items
.disabledclass is used to set the disabled list item:
Example
<ul class="list-group">
<li class="list-group-item disabled">Disabled item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Try it Yourself »
Linked list items
To create a linked list item, you can replace<ul>with<div>
， <a>replacement<li>. If you want to display a gray background on mouse hover, add the.list-group-item-actionclass:
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Try it Yourself »
Remove list borders
Use the.list-group-flushclass to remove the borders and rounded corners of the list:
Example
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Try it Yourself »
Horizontal list groups
We can add the.list-group-horizontalclass to the.list-groupclass to create a horizontal list group:
Example
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Try it Yourself »
Multi-color list items
The color of list items can be set with the following classes:
.list-group-item-success, list-group-item-secondary, list-group-item-info,
list-group-item-warning, .list-group-item-danger, list-group-item-darkandlist-group-item-light:
Example
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success list item</li>
<li class="list-group-item list-group-item-secondary">Secondary list item</li>
<li class="list-group-item list-group-item-info">Info list item</li>
<li class="list-group-item list-group-item-warning">Warning list item</li>
<li class="list-group-item list-group-item-danger">Danger list item</li>
<li class="list-group-item list-group-item-primary">Primary list item</li>
<li class="list-group-item list-group-item-dark">Dark list item</li>
<li class="list-group-item list-group-item-light">Light list item</li>
</ul>
Try it Yourself »
Linked multi-color list items
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Active list item</a>
<a href="#" class="list-group-item list-group-item-success">Success list item</a>
<a href="#" class="list-group-item list-group-item-secondary">Secondary list item</a>
<a href="#" class="list-group-item list-group-item-info">Info list item</a>
<a href="#" class="list-group-item list-group-item-warning">Warning list item</a>
<a href="#" class="list-group-item list-group-item-danger">Danger list item</a>
<a href="#" class="list-group-item list-group-item-primary">Primary list item</a>
<a href="#" class="list-group-item list-group-item-dark">Dark list item</a>
<a href="#" class="list-group-item list-group-item-light">Light list item</a>
</div>
Try it Yourself » Other extensions