Present a list with compact, edge-to-edge grouping.
Before you begin
Section titled “Before you begin”- A Bootstrap 5 page. Include App Connect for dynamic bindings and Bootstrap JavaScript for its interactive controls.
Purpose and structure
Section titled “Purpose and structure”The template is a ul with list-group-flush and sample li items. Replace the sample content; it does not load records or make items interactive. Use this variant when the containing card or panel already supplies the outer boundary.
Flush List Group Properties
Section titled “Flush List Group Properties”| Name | Description |
|---|---|
| ID | Sets this element’s unique page identifier. Use a stable name such as projectSummary when another control, label or anchor must target it. Do not duplicate a static ID inside repeated markup; a component binding name and a form field’s submitted Name serve different purposes. |
| Class | Edits the element’s space-separated CSS class list. For example, add a project-defined class such as project-summary only when your stylesheet defines it. Preserve classes required by the component. A class name alone does not create CSS, load an extension or implement an event handler. |
| Active | Adds the active class for the component’s current/selected appearance. It does not navigate, check a form input or establish application state by itself. When a route or binding manages active state, let that source determine which item is current. |
| Disabled | Adds the disabled CSS class. On an anchor this is not a native disabled attribute and is not a complete keyboard/action safeguard. Prevent or remove unavailable actions, give the correct accessibility state and use native disabled on button controls when appropriate. |
Display
Section titled “Display”| Name | Description |
|---|---|
| Hide on | Hides the element at selected viewport ranges by adding responsive display utilities. For example, hiding below MD produces d-none with a restoring display class at MD. The control uses the component’s normal display type when restoring it. This hides layout and content visually; it does not protect private data or stop a server endpoint being called. Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl). |
| Controls whether this element appears in printed output. Hide writes d-print-none. Show restores the component’s display type for print, such as d-print-block or d-print-table-row. For example, hide a navigation bar when printing a report. Check browser print preview because screen layout alone does not show this setting. Options: Show (d-print-block), Hide (d-print-none). | |
| Visually Hidden | Adds visually-hidden: content remains available to assistive technologies while it is visually clipped. Use it for an accessible label that should not appear on screen, not for hiding private data. It is different from display:none, which also removes the element from layout and generally from the accessibility tree. Default: off. |
| Focusable | Adds visually-hidden-focusable, which hides the element until it or a descendant receives focus. A skip link is a typical example. The element must already be focusable, such as an anchor with href; this class does not add keyboard focusability. Do not combine it with an unconditional visually-hidden class, which would keep it hidden even when focused. Default: off. |
Example and expected result
Section titled “Example and expected result”Place the list in a card, replace its items with three project labels and inspect the shared borders.
Continue with the full workflow
Section titled “Continue with the full workflow”Use the related guide to build and verify the surrounding component or page.
Check your result
Section titled “Check your result”You can edit the intended element, distinguish presentation from application behavior and verify the example in its correct parent.