List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

List group on Bootstrap

Basic Example

<ul class="list-group">
  <li class="list-group-item">News Feed</li>
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
  • News Feed
  • Messages
  • Events
  • Groups
  • Pages

Active Item

<div class="list-group"><a class="list-group-item list-group-item-action active" href="#!">News Feed</a>
  <a class="list-group-item list-group-item-action" href="#!">Messages</a>
  <a class="list-group-item list-group-item-action" href="#!">Events</a>
  <a class="list-group-item list-group-item-action" href="#!">Groups</a>
  <a class="list-group-item list-group-item-action disabled" href="#!">Pages</a>

List group flush

<ul class="list-group list-group-flush">
  <li class="list-group-item">Messages</li>
  <li class="list-group-item">Events</li>
  <li class="list-group-item">Groups</li>
  <li class="list-group-item">Pages</li>
  • Messages
  • Events
  • Groups
  • Pages

List group with badge

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Messages<span class="badge badge-light-primary rounded-pill">14</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Events<span class="badge badge-light-primary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Groups<span class="badge badge-light-primary rounded-pill">1</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Pages<span class="badge badge-light-primary rounded-pill">9</span></li>
  • Messages14
  • Events2
  • Groups1
  • Pages9

List group background

<ul class="list-group">
  <li class="list-group-item py-3">Example with background</li>
  <li class="list-group-item list-group-item-primary py-3">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary py-3">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success py-3">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger py-3">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning py-3">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info py-3">A simple info list group item</li>
  <li class="list-group-item list-group-item-light py-3">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark py-3">A simple dark list group item</li>
  • Example with background
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

List group with Link

Theme Customizer

Explore different styles according to your preferences

Color Scheme

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template