Main Menu

List Group

Lorem ipsum dolor sit amet

Basic List Group
  • Active item here
  • Dapibus ac facilisis in
  • Disabled item here
  • Porta ac consectetur ac
  • Vestibulum at eros

<ul class="list-group">
<li class="list-group-item active">Active item here</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item disabled" aria-disabled="true">Disabled item here</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Links & Buttons

"ul class="list-group""
"a href="#" class="list-group-item list-group-item-action active" aria-current="true""
  The current link item
"/a"
"a href="#" class="list-group-item list-group-item-action""A second link item"/a"
"a href="#" class="list-group-item list-group-item-action""A third link item"/a"
"a href="#" class="list-group-item list-group-item-action""A fourth link item"/a"
"a class="list-group-item list-group-item-action disabled""A disabled link item"/a"
"/ul"

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

Be sure to not use the standard .btn classes here.

Flush List Group
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">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>
List Group with Icon & Badge
  • Design 14
  • Python 2
  • Mathmetics 2 

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
    <span><i class="bi bi-layers-fill me-1"></i> Design</span>
    <span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
    <span><i class="bi bi-layers-fill me-1"></i> Python</span>
    <span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
    <span><i class="bi bi-layers-fill me-1"></i> Mathmetics</span>
    <span class="badge bg-primary rounded-pill">2</span>
</li>
</ul>
List Group with Checkbox

<!-- Badges with Button -->
<!-- Button + badge -->
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-light ms-1">4</span>
</button>

<!-- Pill button + pill badge -->
<button type="button" class="btn rounded-pill btn-dark">
Profile <span class="badge rounded-pill bg-warning ms-1">9</span>
</button>

<!-- Outline button + badge -->
<button type="button" class="btn btn-outline-danger">
Messages <span class="badge bg-success ms-1">18</span>
</button>
List Group with Radio

<ul class="list-group">
<li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
</li>
<li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
</li>
<li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
</li>
</ul>