Loading...

Settings

List Group
List group active & disabled state
Copy
<!-- List group active & disabled state --><ul class="list-group"><li class="list-group-item">List group item 1</li><li class="list-group-item active">List group item 2</li><li class="list-group-item">List group item 3</li><li class="list-group-item disabled">List group item 4</li></ul>
List group links
Copy
<!-- List group links --><div class="list-group"><a class="list-group-item list-group-item-action" href="#">List group item 1</a><a class="list-group-item list-group-item-action" href="#">List group item 2</a><a class="list-group-item list-group-item-action active" href="#">List group item 3</a><a class="list-group-item list-group-item-action disabled" href="#">List group item 5</a></div>
List group flush
Copy
<!-- List group flush --><ul class="list-group list-group-flush"><li class="list-group-item">List group item 1</li><li class="list-group-item active">List group item 2</li><li class="list-group-item">List group item 3</li><li class="list-group-item disabled">List group item 4</li></ul>
List group with badges
Copy
<!-- List group with badges --><ul class="list-group"><li class="list-group-item d-flex align-items-center justify-content-between">List group item 1<span class="badge bg-primary rounded-pill">12</span></li><li class="list-group-item d-flex align-items-center justify-content-between">List group item 2<span class="badge bg-success rounded-pill">6</span></li><li class="list-group-item d-flex align-items-center justify-content-between">List group item 3<span class="badge bg-warning rounded-pill">7</span></li><li class="list-group-item d-flex align-items-center justify-content-between">List group item 4<span class="badge bg-info rounded-pill">3</span></li></ul>
List group checkboxes
Copy
<!-- List group checkboxes --><div class="list-group"><label class="list-group-item"><input class="form-check-input me-2" type="checkbox" value="">List group item 1</label><label class="list-group-item"><input class="form-check-input me-2" type="checkbox" value="" checked>List group item 2</label><label class="list-group-item"><input class="form-check-input me-2" type="checkbox" value="">List group item 3</label><label class="list-group-item"><input class="form-check-input me-2" type="checkbox" value="">List group item 4</label></div>