Bootstrap-List-Group

Bootstrap List groups are flexible component bordered around all.

Basic Bootstrap List group example

<ul class="list-group">
  <li class="list-group-item">Home</li>
  <li class="list-group-item">About Us</li>
  <li class="list-group-item">Our Services</li>
</ul>

List Group Active Items

We can add Add .active to a .list-group-item to indicate the current active selection.

<ul class="list-group">
  <li class="list-group-item active">Home</li>
  <li class="list-group-item">About Us</li>
  <li class="list-group-item">Our Services</li>
</ul>

List Group Disabled items

We can disabled items by adding class .disabled in .list-group-item .

List Group Links and buttons

We can add link in list group by using <a> and button in list group , just add class .list-group-item-action in <a> and button tag after class .list-group-item.

 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
   Home
  </a>
  <a href="#" class="list-group-item list-group-item-action">About us</a>
  <a href="#" class="list-group-item list-group-item-action">Our Services</a>
</div>

List Group Flush

by using list group flush class .list-group-flush to remove some border and remove rounded corner.

 <ul class="list-group list-group-flush bx">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>

List Group With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some  utilities.

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
   Computers
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Laptops
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Desktop
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>