Dashboard
List Groups
To create a basic list group, use an
<ul> element with class .list-group,
and<li> elements with class .list-group-item:
- First item
- Second item
- Third item
List Group With Badges
To create a badge, create a <span>
element with class .badge inside the list item:
- New 12
- Deleted 5
- Warnings 3
List Group With Linked Items
To create a list group with linked items, use
<div> instead of <ul> and
<a> instead of <li>:
Active State
Use the .active class to highlight the
current item:
Disabled Item
To disable an item, add the .disabled
class:
Contextual Classes
The classes for coloring list-items are:
.list-group-item-success, list-group-item-info,
list-group-item-warning, and .list-group-item-danger:
- First item
- Second item
- Third item
- Fourth item
Custom Content
Bootstrap provides the classes
.list-group-item-heading and
.list-group-item-text which can be used as follows: