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>
Copyright © 2021 DesignReset, All rights reserved.
Coded with