Basic Example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

Active items

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Vestibulum at eros

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

With Other Options

Badges

Add bagdes to any list group item to show unread counts, activity, etc.

  • 5 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

Labels

Add labels to any list group item to show notifications, message,etc.

  • Warning Cras justo odio
  • info Dapibus ac facilisis in
  • danger Morbi leo risus

Blue Grey Color

Use class .bg-COLOR for background color.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

Custom ListGroups

JavaScript behavior

Use the tab JavaScript plugin to extend our list group to create tabbable panes of local content.

Links

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder