Dashboard 1
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: