React Bootstrap List Group Component
List Group with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use the React Bootstrap List Group component from CoreUI to display flexible and interactive lists with badges, buttons, contextual styles, and more.
Basic usage of React Bootstrap List Group#
The React Bootstrap List Group component allows you to display a list of content using Bootstrap-styled list items. The default setup uses an unordered list with proper classes.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Active items#
Add the active prop to a <CListGroupItem> to visually mark it as the selected item.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Disabled items#
Use the disabled prop to disable interaction with a list item.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List group as links or buttons#
You can use <a> or <button> elements for actionable React Bootstrap List Group items. Add the as="a" or as="button" prop as needed.
Flush list group#
Remove borders and padding using the flush prop. This is especially useful inside Bootstrap-styled cards.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Horizontal list group#
Add layout="horizontal" to display the list items horizontally. For responsive behavior, use values like horizontal-md, horizontal-lg, etc.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
⚠️ Horizontal list groups cannot be used in combination with
flush.
Contextual styling for list items#
Use Bootstrap contextual classes such as color="primary", color="success", etc. to style list items based on intent or state.
- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.
List group with badges#
Combine list items with badges to indicate notifications, counts, or statuses.
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
Custom content inside list group#
React Bootstrap List Groups support custom content such as headings, paragraphs, or even full layouts using Flex utilities.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group with checkboxes and radios#
Embed checkboxes or radio buttons inside list items for interactive list selection.
API reference#
Explore the full API for the React Bootstrap List Group components: