List Group | EQUATION - Multipurpose Bootstrap Dashboard Template

Basic Active Links Icons Images Badges Checkbox Tabbed Interfaces

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

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

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

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

<ul class="list-group ">
    <li class="list-group-item">An item</li>
    <li class="list-group-item active">An active item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

Change all the li tags to a tags to convert it into a link

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

<!-- Links -->
<div class="list-group">
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">An item</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">A third link item</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">A fourth link item</a>
    <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Messages

4 New Messages
Locations

25 New Travel Locations
Flexible

Customization Flexibility

<!-- Icons -->
<ul class="list-group list-group-icons-meta">
    <li class="list-group-item ">
        <div class="media">
            <div class="d-flex me-3">
                <svg> ... </svg>
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Messages</h6>
                <p class="mg-b-0">4 New Messages</p>
            </div>
        </div>
    </li>
    <li class="list-group-item  active">
        <div class="media">
            <div class="d-flex me-3">
                <svg> ... </svg>
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Locations</h6>
                <p class="mg-b-0">25 New Travel Locations</p>
            </div>
        </div>
    </li>
    <li class="list-group-item ">
        <div class="media">
            <div class="d-flex me-3">
                <svg> ... </svg>
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Flexible</h6>
                <p class="mg-b-0">Customization Flexibility</p>
            </div>
        </div>
    </li>
</ul>

Luke Ivory

Project Lead
Sonia Shaw

Web Designer
Dale Butler

Developer

<!-- Images -->
<ul class="list-group list-group-media">
    <li class="list-group-item ">
        <div class="media">
            <div class="me-3">
                <img alt="avatar" src="../src/assets/img/profile-1.jpeg" class="img-fluid rounded-circle">
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Luke Ivory</h6>
                <p class="mg-b-0">Project Lead</p>
            </div>
        </div>
    </li>
    <li class="list-group-item  active">
        <div class="media">
            <div class="me-3">
                <img alt="avatar" src="../src/assets/img/profile-2.jpeg" class="img-fluid rounded-circle">
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Sonia Shaw</h6>
                <p class="mg-b-0">Web Designer</p>
            </div>
        </div>
    </li>
    <li class="list-group-item  ">
        <div class="media">
            <div class="me-3">
                <img alt="avatar" src="../src/assets/img/profile-3.jpeg" class="img-fluid rounded-circle">
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Dale Butler</h6>
                <p class="mg-b-0">Developer</p>
            </div>
        </div>
    </li>
</ul>

A list item 14
A second list item 2
A third list item 1

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

First checkbox Second checkbox Third checkbox Fourth checkbox Fifth checkbox

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

Home Profile Messages Settings

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Kara Young

Daisy Anderson

Oscar Garner

Server Rebooted

Kelly Portfolio.pdf

Licence Expiring Soon

Basic

Active

Links

Icons

Messages

Locations

Flexible

Images

Luke Ivory

Sonia Shaw

Dale Butler

Badges

Checkbox

Tabbed Interfaces