The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
Home
About Us
Orders
Messages
Contact Us
Active Listgroup
Add .active to a .list-group-item to indicate the current active selection.
Home
About Us
Orders
Messages
Contact Us
Disabled Listgroup
Add .disabled to a .list-group-item to make it appear disabled.
Home
About Us
Orders
Messages
Contact Us
Listgroup with links and buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.
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).
Home
About Us
Orders
Messages
Contact Us
Listgroup Horizontal
Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.
Home
About Us
Contact Us
Home
About Us
Contact Us
Home
About Us
Contact Us
Contextual classes
Use contextual classes to style list items with a stateful background and color.
Default
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Contextual classes with Link
Use contextual classes to style list items with a stateful background and color.
