Kenhuang Academy
  • English

      • Bootstrap List Groups

      Overview

      List groups are flexible components for displaying lists of content with various styles and options.

      Basic List Group

      <ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
</ul>

      Active and Disabled Items

      <ul class="list-group">
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item disabled">Disabled item</li>
</ul>
      <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">Active link</a>
    <a href="#" class="list-group-item list-group-item-action">Link item</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Disabled link</a>
</div>

      With Badges

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

      Contextual Classes

      <ul class="list-group">
    <li class="list-group-item">Default</li>
    <li class="list-group-item list-group-item-primary">Primary</li>
    <li class="list-group-item list-group-item-success">Success</li>
    <li class="list-group-item list-group-item-danger">Danger</li>
    <li class="list-group-item list-group-item-warning">Warning</li>
</ul>

      Next Steps

      Next: Bootstrap Cards →