Bootstrap List Groups

List Groups are incredibly flexible and powerful components designed exclusively for displaying a series of content in a clean, vertical stack.

You can use them to render basic unordered lists, or push them further by transforming them into complex interactive data menus.

1. Basic Structure

To create a standard, un-clickable stack of items, you wrap an <ul> in the .list-group class, and apply .list-group-item to every <li> tag.

An item
A currently active item
A third item
A disabled item
And a fifth one

<!-- Applying the main class to the unordered list container -->
<ul class="list-group">
    <li class="list-group-item">Element One</li>
    
    <!-- Highlight the active state row -->
    <li class="list-group-item active" aria-current="true">Active Element</li>
    <li class="list-group-item">Element Three</li>
</ul>

2. Actionable Links and Buttons

Are you building a navigation sidebar (just like the dark-mode one you see to the left of this screen!) rather than a static text list?

You can seamlessly swap the <ul> into a <div>, and use standard anchor tags (<a>) instead! Just attach .list-group-item-action to trigger a beautiful background highlight effect whenever a user's mouse hovers over it.

The current active link A second link item A third link item A disabled link block

<div class="list-group">
    <!-- It is CRITICAL to append the -action modifier here! -->
    <a href="#" class="list-group-item list-group-item-action active">Clicked link</a>
    <a href="#" class="list-group-item list-group-item-action">Unclicked link</a>
</div>

3. Flush Lists

If you are placing your list group directly inside a pre-existing container (like a Card pane), the borders on the edge of the list group will painfully double up against the edge of the card.

Applying .list-group-flush explicitly deletes the outer borders and rounds off the external corners, causing the list to "flush" cleanly into any parent block.

An item embedded flawlessly on the edge
A second embedded item
A third embedded item

<ul class="list-group list-group-flush">
    <li class="list-group-item">...</li>
</ul>

4. Contextual Colors

Standard background colors map deeply into Bootstrap list groups. By appending .list-group-item-primary onto the item row, Bootstrap will flawlessly match the text, border, and background CSS to standard Bootstrap semantic alerts.

A simple default list group item
A basic primary list group item
A basic secondary list group item
A basic success list group item
A basic danger list group item
A basic warning list group item
A basic info list group item
A basic light list group item
A basic dark list group item

<!-- Apply specific coloring modifiers to rows in identical data sets -->
<ul class="list-group">
    <li class="list-group-item list-group-item-success">A successful row</li>
    <li class="list-group-item list-group-item-danger">A failed row</li>
</ul>

5. With Badges

We just learned about Badges! We can combine standard Flexbox utilities to dynamically float a badge containing the row count identically across the far right edge of the list!

A list item featuring a badge 14
A second list block 2
A third list block 1

<!-- The Flexbox directives are critical to pushing the Badge outward! -->
<li class="list-group-item d-flex justify-content-between align-items-center">
    Incoming Messages
    <!-- Embed the exact badge code from the previous lesson -->
    <span class="badge bg-danger rounded-pill">14</span>
</li>

« Previous Lesson Next Lesson »