List Group #

The list group component is used to display a series of content, often with active, disabled, or selectable items.

Examples

Below are various examples demonstrating different layouts of the list group component.

Basic list group #

    
active items
active items
active items
    

        
        
HTML
        
    
    <ul class="list-group w-50 flex-row">
    <li class="list-group-items">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>active items</a>
    </li>
</ul>

Ordered list group #

    
active items
active items
active items
    

        
        
HTML
        
    
    <ol class="list-group w-50 flex-column">
    <li class="list-group-items active">
        <span>active items</span>
    </li>
    <li class="list-group-items">
        <span>items</span>
    </li>
    <li class="list-group-items disabled">
        <span>disabled items</span>
    </li>
    <li class="list-group-items">
        <span>items</span>
    </li>
</ol>
    

Flush list group with form inputs #

    
active items
active items
active items
    

        
        
HTML
        
    
    <ul class="list-group-flush-column w-50">
    <li class="list-group-items">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>active items</a>
    </li>
</ul>

    
active items
active items
active items

        
        
HTML
        
    
    <ul class="list-group-flush-row w-50">
    <li class="list-group-items">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>active items</a>
    </li>
    <li class="list-group-items">
        <a>active items</a>
    </li>
</ul>

Classes #

Options #

The list group supports different options such as active, disabled, and flush styles.