brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

List Group

Basic List

The most basic list group is an unordered list with list items and the proper classes. Add .active & .disabled classes for states.

  • Regular list group item
  • Active list group item
  • Disabled list group item
Flush

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container.

  • Regular list group item
  • Active list group item
  • Disabled list group item
Contextual classes

Use contextual classes to style list items with a stateful background and color.

  • This is a regular list group item
  • This is a primary list group item
  • This is a secondary list group item
  • This is a success list group item
  • This is a danger list group item
  • This is a warning list group item
  • This is a info list group item
  • This is a light list group item
  • This is a dark list group item
Contextual classes inverse

Use .list-group-inv .list-group-inv-* to change the appearance of list group items.

  • This is a regular list group item
  • This is a primary list group item
  • This is a secondary list group item
  • This is a success list group item
  • This is a danger list group item
  • This is a warning list group item
  • This is a info list group item
With badges

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

  • List group item one 14
  • List group item two 2
  • List group item three 1
Links and buttons

Use anchor or button tag to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.

Link list group item
Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

With icons
  • List group item one
  • List group item two
  • List group item three
  • List group item one 12
  • List group item two 10
  • List group item three 1
With checkbox
  • 12
  • 10
  • 15
  • 12
  • 10
  • 15
JavaScript behavior

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our list group to create tabbable panes of local content.