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
