Basic examples
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. The most basic list group is an unordered list or a list of div's with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
Text items
Basic example of a list group with text items. Each item requires .list-group-item and list group container requires .list-group classes for proper styling
Text item states
Both text and actionable items support active and disabled item states. Use .disabled in a .list-group-item to make it appear disabled, and .active to indicate the current active selection
Text items header
You can add custom headers to the list of text items by using regular <li> or <div> element with a base .list-group class along with our background and text utility classes
Actionable items
Use link or button tags to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action to each item with base .list-group-item class
Actionable item states
Actionable items also support .active and .disabled classes. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events
Actionable items header
Actionable items also can display headers, just make sure you don't use links or buttons in header markup. Headers can contain icons, badges or additional links
Styling options
List group component can be used in any container, but it doesn't usually match all use cases. You can change look and feel entirely just by using our utility classes, but to keep the markup clean we created 2 additional styling options: borderless list to match sidebar navigation style, and flush list that removes some borders and rounded corners to avoid duplicated elements
Flush text items
Add .list-group-flush to the base .list-group container to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards)
Flush actionable items
Useful when a list of links needs to be displayed as a part of parent container. Can be used in modals, cards, dropdown menus, popovers, sidebars etc. In rare cases some adjustments might be needed
Borderless text items
Add .list-group-borderless class to the base .list-group container to remove horizontal borders in list items so that the list style better matches overall list style
Borderless actionable items
The same for actionable items, add .list-group-borderless class to make the list or links or buttons look like sidebar navigation, in case if you need to use it in custom content containers
Content elements
Items in list group component support a few optional elements in various styling options: badges in flat, solid, transparent, light and outline styles; icons in left and right alignment and optional colors. Neither badges nor icons have horizontal spacing by default, use our margin utility classes to control the distance between element and text label
Badges in text items
List group items support badges in various styles and alignment options. Make sure to add .d-flex.align-items-center classes to .list-group-item for a perfect vertical alignment
Badges in actionable items
Be careful with styling the actionable item in active state and using badges with a solid bg color, due to contrast difference. Outline style or semi transparent background is recommended
Icons in text items
List group items also support icons in left and right alignment. Right alignment requires .d-flex.align-items-center classes in list group item and .ms-auto in icon tag to stick it to the right
Icons in actionable items
Icons inherit color from actionable list group item styles in all states, so no adjustment is required. However make sure to add margin utility classes to icons as they don't have any spacing by default
Form elements
List groups support all available form controls in both nativa and custom style. They can be aligned to the left and right, and also can be used multiple times in the same list group item or combined with more advanced content type such as headings, multi line text, badges, buttons etc. It's not recommended to use .active class in actionable items as checked form control indicates the same state
Checkboxes in text items
List group items support checkboxes in native browser style or custom style. In text items they are used without label by default, which means only checkbox is clickable
Checkboxes in actionable items
In actionable items checkbox is wrapped in <label> element, making the whole line clickable. Use margin utility classes to control the distance between checkbox and text
Radio buttons in text items
List group items support radio buttons in native browser style or custom style. In text items they are used without label by default, which means only radio button itself is clickable
Radio buttons in actionable items
In actionable items radio button is wrapped in <label> element, making the whole line clickable. Use margin utility classes to control the distance between radio button and text
Switches in text items
List group items support switches for both checkboxes and radio buttons. In text items they are used without label by default, which means only switch itself is clickable
Switches in actionable items
In actionable items switch is wrapped in <label> element, making the whole line clickable. Use margin utility classes to control the distance between switch and text
Contextual classes
Use contextual classes to style list items with a stateful background and color. By default we support 8 primary colors and 5 optional colors from our design system. Colors in light and dark themes slightly differ to keep the contrast ratio consistent. You can still override colors with our utility classes and use all other styling options and content from previous examples.
Primary colors in text items
Regular text items can have alternative background and text colors that can be set by adding contextual classes. Just use .list-group-item-[color] in .list-group-item container
Primary colors in actionable items
All contextual colors in actionable items also have hover and active states to provide visual feedback on user action. Use .list-group-item-[color] in .list-group-item-action container
Secondary colors in text items
Limitless color system includes 8 primary and 5 optional secondary colors: pink, purple, teal, indigo and yellow. Use corresponding color name in .list-group-item-[color] container
Secondary colors in actionable items
The same is for actionable items. All secondary colors also include styles for all states by default and don't require any adjustments. Note: colors in light and dark themes are different
Horizontal layout
List group component supports 2 directions - vertical and horizontal. Simply add .list-group-horizontal class 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.
Text items
This example uses .list-group-horizontal-sm class to wrap list items and change layout direction on small breakpoints. Currently horizontal list groups cannot be combined with flush list groups
- An item
- A second item
- A third item
- A fourth item
Text item states
Both text and actionable items support active and disabled item states. Use .disabled in a .list-group-item to make it appear disabled, and .active to indicate the current active selection
- An item
- A second item
- A third item
- A fourth item
Justified list of text items
If you want make list group items having equal flexible width that take all available horizontal space, add .flex-fill and .text-center classes to each list group item
Actionable items
Use link or button tags to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action to each item with base .list-group-item class
Actionable item states
Actionable items also support .active and .disabled classes. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events
Justified list of actionable items
Add .flex-fill and .text-center classes to each actionable list group item (anchor or button tag) and horizontal list group will take all available space
Custom content
Simple example of a custom content in the list group component. You can add nearly any HTML markup, add images, custom elements and colors to the list group item. Example below demonstrates a simple content with icons, titles, right annotations and text body. Also some empty list items for extra spacing. For proper content styling, flexbox utilities must be used.
Custom content in text items
In this example we have a borderless list group with icon, heading, time stamp and multi line text. List group is a universal component that allows you to use any markup within list group item
Leapt so heedlessly
2 days agoBlack where yikes
3 days agoGecko preparatory
4 days agoParrot slid wow
5 days agoCustom content in actionable items
The same as in previous example, but here all list group items are clickable. Although nearly any element is allowed in list items, nested links or buttons are not allowed due to HTML limitations
