Bootstrap List Group

A list group is a nice way to show a list of items, like a menu, a list of messages or settings. It is made with .list-group and .list-group-item.

Basic list group

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
</ul>

Links and buttons

Use .list-group-item-action on links or buttons to get a hover and a focus style. Use div or ul as the wrapper, not a ul with a children.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Active link</a>
  <a href="#" class="list-group-item list-group-item-action">Second link</a>
  <button type="button" class="list-group-item list-group-item-action">A button item</button>
</div>

Flush, numbered and horizontal

<ul class="list-group list-group-flush mb-3">
  <li class="list-group-item">Flush item 1 (no outer border)</li>
  <li class="list-group-item">Flush item 2</li>
</ul>
<ol class="list-group list-group-numbered mb-3">
  <li class="list-group-item">Numbered item</li>
  <li class="list-group-item">Another numbered item</li>
</ol>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">One</li>
  <li class="list-group-item">Two</li>
  <li class="list-group-item">Three</li>
</ul>

Colors and badges

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ul>

Checkbox list

<ul class="list-group">
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="c1"><label for="c1" class="form-check-label">Buy milk</label></li>
  <li class="list-group-item"><input class="form-check-input me-2" type="checkbox" id="c2" checked><label for="c2" class="form-check-label">Pay the bill</label></li>
</ul>

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.