گروه لیست

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

    <!-- 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.svg" 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@alui.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@alui.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.svg" 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@alui.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.svg" 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@alui.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.svg" 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@alui.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-right 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-right 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-right 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-right 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-right 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>
    

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

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

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