Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

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>