Bootstrap 5 List Group

List group

Bootstrap List Groups allows displaying are a series of content. Learn how to use Bootstrap list group to build complex list structure on your website.

🤖 Looking for the LLM-optimized version?View llm.md

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

Basic example

The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.

An item
A second item
A third item
A fourth item
And a fifth one

html

<ulclass="list-group"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>

Active items

Attach.active to a.list-group-item to show the current active selection.

An active item
A second item
A third item
A fourth item
And a fifth one

html

<ulclass="list-group"><liclass="list-group-item active"aria-current="true">An active item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>

Disabled items

Attach.disabled to a.list-group-item to make it appear disabled. Remark that some of the elements with.disabled will also require custom JavaScript to disable their click events (e.g., links).

A disabled item
A second item
A third item
A fourth item
And a fifth one

html

<ulclass="list-group"><liclass="list-group-item disabled"aria-disabled="true">A disabled item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>

Links and buttons

Use<a>s or<button>s to createactionable list group items with hover, disabled, and active states by adding.list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like<li>s or<div>s) don’t provide a click or tap affordance.

Be sure tonot use the standard.btn classes here.

The current link item A second link item A third link item A fourth link item A disabled link item

html

<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"aria-current="true">    The current link item</a><ahref="#"class="list-group-item list-group-item-action">A second link item</a><ahref="#"class="list-group-item list-group-item-action">A third link item</a><ahref="#"class="list-group-item list-group-item-action">A fourth link item</a><aclass="list-group-item list-group-item-action disabled"aria-disabled="true">A disabled link item</a></div>

With<button>s, you can also make use of thedisabled attribute instead of the.disabled class. Sadly,<a>s don’t support the disabled attribute.

html

<divclass="list-group"><buttontype="button"class="list-group-item list-group-item-action active"aria-current="true">    The current button</button><buttontype="button"class="list-group-item list-group-item-action">A second button item</button><buttontype="button"class="list-group-item list-group-item-action">A third button item</button><buttontype="button"class="list-group-item list-group-item-action">A fourth button item</button><buttontype="button"class="list-group-item list-group-item-action"disabled>A disabled button item</button></div>

Flush

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).

An item
A second item
A third item
A fourth item
And a fifth one

html

<ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>

Numbered

Add the.list-group-numbered modifier class (and optionally use an<ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a<ol>s default browser styling) for better placement inside list group items and to allow for better customization.

Numbers are generated bycounter-reset on the<ol>, and then styled and placed with a::before pseudo-element on the<li> withcounter-increment andcontent.

A list item
A list item
A list item

html

<olclass="list-group list-group-numbered"><liclass="list-group-item">A list item</li><liclass="list-group-item">A list item</li><liclass="list-group-item">A list item</li></ol>

These work great with custom content as well.

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

html

<olclass="list-group list-group-numbered"><liclass="list-group-item d-flex justify-content-between align-items-start"><divclass="ms-2 me-auto"><divclass="fw-bold">Subheading</div>      Content for list item</div><spanclass="badge text-bg-primary rounded-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-start"><divclass="ms-2 me-auto"><divclass="fw-bold">Subheading</div>      Content for list item</div><spanclass="badge text-bg-primary rounded-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-start"><divclass="ms-2 me-auto"><divclass="fw-bold">Subheading</div>      Content for list item</div><spanclass="badge text-bg-primary rounded-pill">14</span></li></ol>

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|xxl} to make a list group horizontal starting at that breakpoint’smin-width. Currentlyhorizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add.flex-fill to each list group item.

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

html

<ulclass="list-group list-group-horizontal"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-sm"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-md"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-lg"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-xl"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-xxl"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul>

Contextual classes

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

A simple default list group item
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

html

<ulclass="list-group"><liclass="list-group-item">A simple default list group item</li><liclass="list-group-item list-group-item-primary">A simple primary list group item</li><liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li><liclass="list-group-item list-group-item-success">A simple success list group item</li><liclass="list-group-item list-group-item-danger">A simple danger list group item</li><liclass="list-group-item list-group-item-warning">A simple warning list group item</li><liclass="list-group-item list-group-item-info">A simple info list group item</li><liclass="list-group-item list-group-item-light">A simple light list group item</li><liclass="list-group-item list-group-item-dark">A simple dark list group item</li></ul>

Contextual classes also work with.list-group-item-action. Note the addition of the hover styles here not present in the previous example. Also supported is the.active state; apply it to indicate an active selection on a contextual list group item.

A simple default list group item 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

html

<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">A simple default list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a></div>

Conveying meaning to assistive technologies

Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It's essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the.visually-hidden class.

With badges

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

A list item14
A second list item2
A third list item1

html

<ulclass="list-group"><liclass="list-group-item d-flex justify-content-between align-items-center">    A list item<spanclass="badge text-bg-primary rounded-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-center">    A second list item<spanclass="badge text-bg-primary rounded-pill">2</span></li><liclass="list-group-item d-flex justify-content-between align-items-center">    A third list item<spanclass="badge text-bg-primary rounded-pill">1</span></li></ul>

Custom content

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

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some muted small print.

html

<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"aria-current="true"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><small>3 days ago</small></div><pclass="mb-1">Some placeholder content in a paragraph.</p><small>And some small print.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><smallclass="text-muted">3 days ago</small></div><pclass="mb-1">Some placeholder content in a paragraph.</p><smallclass="text-muted">And some muted small print.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><smallclass="text-muted">3 days ago</small></div><pclass="mb-1">Some placeholder content in a paragraph.</p><smallclass="text-muted">And some muted small print.</small></a></div>

Checkboxes and radios

Place CoreUI for Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without<label>s, but please remember to include anaria-label attribute and value for accessibility.

First checkbox
Second checkbox
Third checkbox
Fourth checkbox
Fifth checkbox

html

<ulclass="list-group"><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="...">    First checkbox</li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="...">    Second checkbox</li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="...">    Third checkbox</li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="...">    Fourth checkbox</li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="...">    Fifth checkbox</li></ul>

And if you want<label>s as the.list-group-item for large hit areas, you can do that, too.

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox

html

<divclass="list-group"><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value="">    First checkbox</label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value="">    Second checkbox</label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value="">    Third checkbox</label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value="">    Fourth checkbox</label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value="">    Fifth checkbox</label></div>

JavaScript behavior

Heads up! In our documentation, all examples showstandard CoreUI implementation. If you are using aBootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please usebootstrap instead ofcoreui. For example,new bootstrap.Alert(...) instead ofnew coreui.Alert(...)
In events, please usebs instead ofcoreui, for exampleclose.bs.alert instead ofclose.coreui.alert
In data attributes, please usebs instead ofcoreui. For example,data-bs-toggle="..." instead ofdata-coreui-toggle="..."

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

Home Profile Messages Settings

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<divclass="row"><divclass="col-4"><divclass="list-group"id="list-tab"role="tablist"><aclass="list-group-item list-group-item-action active"id="list-home-list"data-coreui-toggle="list"href="#list-home"role="tab"aria-controls="list-home">Home</a><aclass="list-group-item list-group-item-action"id="list-profile-list"data-coreui-toggle="list"href="#list-profile"role="tab"aria-controls="list-profile">Profile</a><aclass="list-group-item list-group-item-action"id="list-messages-list"data-coreui-toggle="list"href="#list-messages"role="tab"aria-controls="list-messages">Messages</a><aclass="list-group-item list-group-item-action"id="list-settings-list"data-coreui-toggle="list"href="#list-settings"role="tab"aria-controls="list-settings">Settings</a></div></div><divclass="col-8"><divclass="tab-content"id="nav-tabContent"><divclass="tab-pane fade show active"id="list-home"role="tabpanel"aria-labelledby="list-home-list">...</div><divclass="tab-pane fade"id="list-profile"role="tabpanel"aria-labelledby="list-profile-list">...</div><divclass="tab-pane fade"id="list-messages"role="tabpanel"aria-labelledby="list-messages-list">...</div><divclass="tab-pane fade"id="list-settings"role="tabpanel"aria-labelledby="list-settings-list">...</div></div></div></div>

Using data attributes

You can activate a list group navigation without writing any JavaScript by simply specifyingdata-coreui-toggle="list" or on an element. Use these data attributes on.list-group-item.

<divrole="tabpanel"><!-- List group --><divclass="list-group"id="myList"role="tablist"><aclass="list-group-item list-group-item-action active"data-coreui-toggle="list"href="#home"role="tab">Home</a><aclass="list-group-item list-group-item-action"data-coreui-toggle="list"href="#profile"role="tab">Profile</a><aclass="list-group-item list-group-item-action"data-coreui-toggle="list"href="#messages"role="tab">Messages</a><aclass="list-group-item list-group-item-action"data-coreui-toggle="list"href="#settings"role="tab">Settings</a></div><!-- Tab panes --><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel">...</div><divclass="tab-pane"id="profile"role="tabpanel">...</div><divclass="tab-pane"id="messages"role="tabpanel">...</div><divclass="tab-pane"id="settings"role="tabpanel">...</div></div></div>

Via JavaScript

Enable tabbable list item via JavaScript (each list item needs to be activated individually):

consttriggerTabList=document.querySelectorAll('#myTab a')triggerTabList.forEach(triggerEl=>{consttabTrigger=newcoreui.Tab(triggerEl)triggerEl.addEventListener('click',event=>{event.preventDefault()tabTrigger.show()})})

You can activate individual list item in several ways:

consttriggerEl=document.querySelector('#myTab a[href="#profile"]')coreui.Tab.getInstance(triggerEl).show()// Select tab by nameconsttriggerFirstTabEl=document.querySelector('#myTab li:first-child a')coreui.Tab.getInstance(triggerFirstTabEl).show()// Select first tab

Fade effect

To make tabs panel fade in, add.fade to each.tab-pane. The first tab pane must also have.show to make the initial content visible.

<divclass="tab-content"><divclass="tab-pane fade show active"id="home"role="tabpanel">...</div><divclass="tab-pane fade"id="profile"role="tabpanel">...</div><divclass="tab-pane fade"id="messages"role="tabpanel">...</div><divclass="tab-pane fade"id="settings"role="tabpanel">...</div></div>

Methods

constructor

Asynchronous methods and transitions

All our API methods areasynchronous and initiate atransition. They return to the caller as soon as the transition begins butbefore it concludes. Furthermore, a method call on atransitioning component will be ignored.

Refer to our JavaScript documentation for further details.

Activates your content as a tab element.

You can create a tab instance with the constructor, for example:

constcuiTab=newcoreui.Tab('#myTab')

Method	Description
`dispose`	Destroys an element’s tab.
`getInstance`	Static method which allows you to get the tab instance associated with a DOM element, you can use it like this:`coreui.Tab.getInstance(element)`.
`getOrCreateInstance`	Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized You can use it like this:`coreui.Tab.getOrCreateInstance(element)`.
`show`	Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden.Returns to the caller before the tab pane has actually been shown (for example, before the`shown.coreui.tab` event occurs).

Events

When showing a new tab, the events fire in the following order:

hide.coreui.tab (on the current active tab)
show.coreui.tab (on the to-be-shown tab)
hidden.coreui.tab (on the previous active tab, the same one as for thehide.coreui.tab event)
shown.coreui.tab (on the newly-active just-shown tab, the same one as for theshow.coreui.tab event)

If no tab was already active, thehide.coreui.tab andhidden.coreui.tab events will not be fired.

Event type	Description
`hide.coreui.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use`event.target` and`event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.coreui.tab`	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use`event.target` and`event.relatedTarget` to target the previous active tab and the new active tab, respectively.
`show.coreui.tab`	This event fires on tab show, but before the new tab has been shown. Use`event.target` and`event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.coreui.tab`	This event fires on tab show after a tab has been shown. Use`event.target` and`event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.

consttabElms=document.querySelectorAll('a[data-coreui-toggle="list"]')tabElms.forEach(tabElm=>{tabElm.addEventListener('shown.coreui.tab',event=>{event.target// newly activated tabevent.relatedTarget// previous active tab})})

Customizing

CSS variables

List groups use local CSS variables on.list-group for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/_list-group.scss

--cui-list-group-color:#{$list-group-color};--cui-list-group-bg:#{$list-group-bg};--cui-list-group-border-color:#{$list-group-border-color};--cui-list-group-border-width:#{$list-group-border-width};--cui-list-group-border-radius:#{$list-group-border-radius};--cui-list-group-item-padding-x:#{$list-group-item-padding-x};--cui-list-group-item-padding-y:#{$list-group-item-padding-y};--cui-list-group-action-color:#{$list-group-action-color};--cui-list-group-action-hover-color:#{$list-group-action-hover-color};--cui-list-group-action-hover-bg:#{$list-group-hover-bg};--cui-list-group-action-active-color:#{$list-group-action-active-color};--cui-list-group-action-active-bg:#{$list-group-action-active-bg};--cui-list-group-disabled-color:#{$list-group-disabled-color};--cui-list-group-disabled-bg:#{$list-group-disabled-bg};--cui-list-group-active-color:#{$list-group-active-color};--cui-list-group-active-bg:#{$list-group-active-bg};--cui-list-group-active-border-color:#{$list-group-active-border-color};

SASS variables

scss/_variables.scss

$list-group-color:var(--#{$prefix}body-color);$list-group-bg:var(--#{$prefix}body-bg);$list-group-border-color:var(--#{$prefix}border-color);$list-group-border-width:var(--#{$prefix}border-width);$list-group-border-radius:var(--#{$prefix}border-radius);$list-group-item-padding-y:$spacer*.5;$list-group-item-padding-x:$spacer;// fusv-disable$list-group-item-bg-scale:-80%;// Deprecated in v5.0.0$list-group-item-color-scale:40%;// Deprecated in v5.0.0// fusv-enable$list-group-hover-bg:var(--#{$prefix}tertiary-bg);$list-group-active-color:$component-active-color;$list-group-active-bg:$component-active-bg;$list-group-active-border-color:$list-group-active-bg;$list-group-disabled-color:var(--#{$prefix}secondary-color);$list-group-disabled-bg:$list-group-bg;$list-group-action-color:var(--#{$prefix}secondary-color);$list-group-action-hover-color:var(--#{$prefix}emphasis-color);$list-group-action-active-color:var(--#{$prefix}body-color);$list-group-action-active-bg:var(--#{$prefix}secondary-bg);

SASS mixins

Deprecated in v5.0.0

Used in combination with$theme-colors to generate thecontextual variant classes for.list-group-items.

scss/mixins/_list-group.scss

@mixin list-group-item-variant($state,$variant){$background:map.get($variant,"bg");$background-hover:map.get($variant,"bg-hover");$color:contrast-ratio-correction(map.get($variant,"color"),map.get($variant,"bg"),$alert-color-scale,$state);--#{$prefix}list-group-color:#{$color};--#{$prefix}list-group-bg:#{$background};--#{$prefix}list-group-hover-bg:#{$background-hover};--#{$prefix}list-group-action-hover-color:#{$color};--#{$prefix}list-group-action-active-color:#{$white};--#{$prefix}list-group-action-active-bg:#{$color};--#{$prefix}list-group-action-active-border-color:#{$color};}

SASS loop

Loop that generates the modifier classes with thelist-group-item-variant() mixin.

scss/_list-group.scss

// List group contextual variants//// Add modifier classes to change text and background color on individual items.// Organizationally, this must come after the `:hover` states.@each$stateinmap.keys($theme-colors){.list-group-item-#{$state}{--#{$prefix}list-group-color:var(--#{$prefix}#{$state}-text-emphasis);--#{$prefix}list-group-bg:var(--#{$prefix}#{$state}-bg-subtle);--#{$prefix}list-group-border-color:var(--#{$prefix}#{$state}-border-subtle);--#{$prefix}list-group-action-hover-color:var(--#{$prefix}emphasis-color);--#{$prefix}list-group-action-hover-bg:var(--#{$prefix}#{$state}-border-subtle);--#{$prefix}list-group-action-active-color:var(--#{$prefix}emphasis-color);--#{$prefix}list-group-action-active-bg:var(--#{$prefix}#{$state}-border-subtle);--#{$prefix}list-group-active-color:var(--#{$prefix}#{$state}-bg-subtle);--#{$prefix}list-group-active-bg:var(--#{$prefix}#{$state}-text-emphasis);--#{$prefix}list-group-active-border-color:var(--#{$prefix}#{$state}-text-emphasis);}}

CoreUI vs Bootstrap

While this List Group component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
👨‍💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap

Movatterモバイル変換

Bootstrap 5 List Group

List group

Other frameworks

Basic example

Active items

Disabled items

Links and buttons

Flush

Numbered

Horizontal

Contextual classes

Conveying meaning to assistive technologies

With badges

Custom content

List group item heading

List group item heading

List group item heading

Checkboxes and radios

JavaScript behavior

Using data attributes

Via JavaScript

Fade effect

Methods

constructor

Asynchronous methods and transitions

Events

Customizing

CSS variables

SASS variables

SASS mixins

SASS loop

CoreUI vs Bootstrap