:: LUNO :: List Group

Basic example

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

Preview
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus
2 Dapibus ac facilisis in
1 Morbi leo risus

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1
Dapibus ac facilisis in 2
Morbi leo risus 1

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<!-- List Group: normal  -->
<ul class="list-group list-group-custom">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

<!-- List Group: with badge left side -->
<ul class="list-group list-group-custom">
    <li class="list-group-item">
        <span class="badge bg-primary me-2">14</span>
        Cras justo odio
    </li>
    <li class="list-group-item">
        <span class="badge bg-danger me-2">2</span>
        Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
        <span class="badge bg-info me-2">1</span>
        Morbi leo risus
    </li>
    <li class="list-group-item">
        <span class="badge bg-warning me-2">2</span>
        Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
        <span class="badge bg-secondary me-2">1</span>
        Morbi leo risus
    </li>
</ul>

<!-- List Group: with badge pill right side -->
<ul class="list-group list-group-custom">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Cras justo odio
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge bg-danger rounded-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge bg-info rounded-pill">1</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge bg-warning rounded-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge bg-secondary rounded-pill">1</span>
    </li>
</ul>

<!-- List Group: with checkbox -->
<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Cras justo odio
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Morbi leo risus
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Porta ac consectetur ac
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        Vestibulum at eros
    </li>
</ul>

Preview
HTML

7 New Feedback Today
It will give a smart finishing to your site
New User 10:45
I feel great! Thanks team
Server Warning 10:50
Your connection is not private
Issue Fixed 11:05
WE have fix all Design bug with Responsive
7 New Orders 11:35
You received a new oder from Tina.

Front Door
Air Conditioner
Enable RTL Mode!
Front Door
Air Conditioner
Washing Machine

<!-- List Group: User list  -->
<ul class="list-unstyled list-group list-group-custom list-group-flush mb-0">
    <li class="list-group-item px-md-4 py-3">
        <a href="javascript:void(0);" class="d-flex">
            <img class="avatar rounded-circle" src="assets/images/xs/avatar1.jpg" alt="">
            <div class="flex-fill ms-3 text-truncate">
                <h6 class="d-flex justify-content-between mb-0"><span>Chris Fox</span></h6>
                <span class="text-muted">ChrisFox@LUNO.com</span>
            </div>
        </a>
    </li>
    <li class="list-group-item px-md-4 py-3">
        <a href="javascript:void(0);" class="d-flex">
            <div class="avatar rounded-circle no-thumbnail">RH</div>
            <div class="flex-fill ms-3 text-truncate">
                <h6 class="d-flex justify-content-between mb-0"><span>Robert Hammer</span></h6>
                <span class="text-muted">RobertHammer@LUNO.com</span>
            </div>
        </a>
    </li>
    <li class="list-group-item px-md-4 py-3">
        <a href="javascript:void(0);" class="d-flex">
            <img class="avatar rounded-circle" src="assets/images/xs/avatar3.jpg" alt="">
            <div class="flex-fill ms-3 text-truncate">
                <h6 class="d-flex justify-content-between mb-0"><span>Orlando Lentz</span></h6>
                <span class="text-muted">RobertHammer@LUNO.com</span>
            </div>
        </a>
    </li>
    <li class="list-group-item px-md-4 py-3">
        <a href="javascript:void(0);" class="d-flex">
            <img class="avatar rounded-circle" src="assets/images/xs/avatar4.jpg" alt="">
            <div class="flex-fill ms-3 text-truncate">
                <h6 class="d-flex justify-content-between mb-0"><span>Barbara Kelly</span></h6>
                <span class="text-muted">RobertHammer@LUNO.com</span>
            </div>
        </a>
    </li>
    <li class="list-group-item px-md-4 py-3">
        <a href="javascript:void(0);" class="d-flex">
            <img class="avatar rounded-circle" src="assets/images/xs/avatar5.jpg" alt="">
            <div class="flex-fill ms-3 text-truncate">
                <h6 class="d-flex justify-content-between mb-0"><span>Robert Hammer</span></h6>
                <span class="text-muted">RobertHammer@LUNO.com</span>
            </div>
        </a>
    </li>
</ul>

<!-- List Group: Notification -->
<ul class="list-unstyled list-group list-group-custom list-group-flush mb-0">
    <li class="list-group-item d-flex py-3">
        <div class="avatar"><i class="fa fa-thumbs-o-up fa-lg"></i></div>
        <div class="flex-grow-1">
            <h6 class="mb-0">7 New Feedback <small class="float-end text-muted">Today</small></h6>
            <small>It will give a smart finishing to your site</small>
        </div>
    </li>
    <li class="list-group-item d-flex py-3">
        <div class="avatar"><i class="fa fa-user fa-lg"></i></div>
        <div class="flex-grow-1">
            <h6 class="mb-0">New User <small class="float-end text-muted">10:45</small></h6>
            <small>I feel great! Thanks team</small>
        </div>
    </li>
    <li class="list-group-item d-flex py-3">
        <div class="avatar"><i class="fa fa-question-circle fa-lg"></i></div>
        <div class="flex-grow-1">
            <h6 class="mb-0 text-warning">Server Warning <small class="float-end text-muted">10:50</small></h6>
            <small>Your connection is not private</small>
        </div>
    </li>
    <li class="list-group-item d-flex py-3">
        <div class="avatar"><i class="fa fa-check fa-lg"></i></div>
        <div class="flex-grow-1">
            <h6 class="mb-0 text-danger">Issue Fixed <small class="float-end text-muted">11:05</small></h6>
            <small>WE have fix all Design bug with Responsive</small>
        </div>
    </li>
    <li class="list-group-item d-flex py-3">
        <div class="avatar"><i class="fa fa-shopping-basket fa-lg"></i></div>
        <div class="flex-grow-1">
            <h6 class="mb-0">7 New Orders <small class="float-end text-muted">11:35</small></h6>
            <small>You received a new oder from Tina.</small>
        </div>
    </li>                                   
</ul>

<!-- List Group: iOT list with switch -->
<ul class="list-unstyled list-group list-group-custom list-group-flush mb-0">
    <li class="list-group-item d-flex align-items-center py-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="list-group1">
            <label class="form-check-label" for="list-group1">Front Door</label>
        </div>
    </li>
    <li class="list-group-item d-flex align-items-center py-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="list-group2" checked="">
            <label class="form-check-label" for="list-group2">Air Conditioner</label>
        </div>
    </li>
    <li class="list-group-item d-flex align-items-center py-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="list-group3">
            <label class="form-check-label" for="list-group3">Enable RTL Mode!</label>
        </div>
    </li>
    <li class="list-group-item d-flex align-items-center py-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="list-group4">
            <label class="form-check-label" for="list-group4">Front Door</label>
        </div>
    </li>
    <li class="list-group-item d-flex align-items-center py-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="list-group5">
            <label class="form-check-label" for="list-group5">Air Conditioner</label>
        </div>
    </li>
    <li class="list-group-item d-flex align-items-center py-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="list-group6" checked="">
            <label class="form-check-label" for="list-group6">Washing Machine</label>
        </div>
    </li>
</ul>

Active & Disabled items

Add .active to a .list-group-item to indicate the current active selection.

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

Preview
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group list-group-custom">
    <li class="list-group-item active" aria-current="true">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item disabled">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

Preview
HTML

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

Contextual classes

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

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.

Preview
HTML

Simple list group

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

list gorup with Anchor Link tag

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

<ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>