#### Basic

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

#### Active

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>

#### Links

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>

#### Icons

- ###### 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>

#### Images

- ###### 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>

#### Badges

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

#### Checkbox

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>

#### Tabbed Interfaces

Home Profile Messages Settings

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