
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>
Thank you a bunch for sharing this with all people
you actually recognize what you’re speaking
approximately! Bookmarked. Kindly also seek advice
from my website =). We can have a hyperlink alternate arrangement
between us