Basic
Add .active
to a .list-group-item
to indicate the current active selection.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Basic --><ul class="list-group "><li class="list-group-item">Cras justo odio</li><li class="list-group-item active">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>
Links
Change all the li
tags to a
tags to convert it into a link
<!-- Links --><div class="list-group "><a href="javascript:void(0);" class="list-group-item list-group-item-action">Cras justo odio</a><a href="javascript:void(0);" class="list-group-item list-group-item-action active">Dapibus ac facilisis in</a><a href="javascript:void(0);" class="list-group-item list-group-item-action">Morbi leo risus</a><a href="javascript:void(0);" class="list-group-item list-group-item-action">Porta ac consectetur ac</a><a href="javascript:void(0);" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a></div>
Icons
-
Messages
4 New Messages
-
Locations
25 New Travel Locations
-
Flexible
Customization Flexibility
<!-- Icons --><ul class="list-group list-group-icons-meta"><li class="list-group-item list-group-item-action"><div class="media"><div class="d-flex mr-3"><svg>... </svg></div><div class="media-body"><h6 class="tx-inverse">Messages</h6><p class="mg-b-0">4 New Messages</p></div></div></li><li class="list-group-item list-group-item-action active"><div class="media"><div class="d-flex mr-3"><svg>... </svg></div><div class="media-body"><h6 class="tx-inverse">Locations</h6><p class="mg-b-0">25 New Travel Locations</p></div></div></li><li class="list-group-item list-group-item-action"><div class="media"><div class="d-flex mr-3"><svg>... </svg></div><div class="media-body"><h6 class="tx-inverse">Flexible</h6><p class="mg-b-0">Customization Flexibility</p></div></div></li></ul>
Images
-
Luke Ivory
Project Lead
-
Sonia Shaw
Web Designer
-
Dale Butler
Developer
<!-- Images --><ul class="list-group list-group-media"><li class="list-group-item list-group-item-action"><div class="media"><div class="mr-3"><img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle"></div><div class="media-body"><h6 class="tx-inverse">Luke Ivory</h6><p class="mg-b-0">Project Lead</p></div></div></li><li class="list-group-item list-group-item-action active"><div class="media"><div class="mr-3"><img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle"></div><div class="media-body"><h6 class="tx-inverse">Sonia Shaw</h6><p class="mg-b-0">Web Designer</p></div></div></li><li class="list-group-item list-group-item-action "><div class="media"><div class="mr-3"><img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle"></div><div class="media-body"><h6 class="tx-inverse">Dale Butler</h6><p class="mg-b-0">Developer</p></div></div></li></ul>
Task
<!-- Task --><ul class="list-group task-list-group"><li class="list-group-item list-group-item-action"><div class="n-chk"><label class="new-control new-checkbox checkbox-primary w-100 justify-content-between"><input type="checkbox" class="new-control-input"><span class="new-control-indicator"></span><span class="ml-2">List groups are a flexible and powerful component for displaying simple. </span><span class="ml-3 d-block"><span class="badge badge-secondary">Project</span></span></label></div></li><li class="list-group-item list-group-item-action active"><div class="n-chk"><label class="new-control new-checkbox checkbox-primary w-100 justify-content-between"><input type="checkbox" class="new-control-input"><span class="new-control-indicator"></span><span class="ml-2">List groups are a flexible and powerful component for displaying simple. </span><span class="ml-3 d-block"><span class="badge badge-primary">Urgent</span></span></label></div></li><li class="list-group-item list-group-item-action"><div class="n-chk"><label class="new-control new-checkbox checkbox-primary w-100 justify-content-between"><input type="checkbox" class="new-control-input"><span class="new-control-indicator"></span><span class="ml-2">List groups are a flexible and powerful component for displaying simple.</span><span class="ml-3 d-block"><span class="badge badge-success">Success</span></span></label></div></li></ul>