• An active item
• A second item
• A third item
• A fourth item
• A fifth item

                                
    <ul class="list-group list-items-active">
    <li aria-current="true" class="list-group-item list-active active">
        <i class="ti ti-arrow-big-right-line"></i> An active item
    </li>
    <li class="list-group-item list-active">
        <i class="ti ti-arrow-big-right-line"></i> A second item
    </li>
    <li class="list-group-item list-active">
        <i class="ti ti-arrow-big-right-line"></i> A third item
    </li>
    <li class="list-group-item list-active">
        <i class="ti ti-arrow-big-right-line"></i> A fourth item
    </li>
    <li class="list-group-item list-active">
        <i class="ti ti-arrow-big-right-line"></i> And a fifth one
    </li>
</ul>
                                
                              

                                
 <div class="list-group list-button">
    <button aria-current="true"
            class="list-group-item list-group-item-action active d-flex gap-2"
            type="button">
        <span class="bg-white h-20 w-20 d-flex-center b-r-50 f-s-10">A</span>
        The current button
    </button>

    <button class="list-group-item list-group-item-action d-flex gap-2" type="button">
        <span class="bg-dark f-s-10 h-20 w-20 d-flex-center b-r-50">B</span>
        A second button item
    </button>

    <button class="list-group-item list-group-item-action d-flex gap-2" type="button">
        <span class="bg-dark f-s-10 h-20 w-20 d-flex-center b-r-50">C</span>
        A third button item
    </button>

    <button class="list-group-item list-group-item-action d-flex gap-2" type="button">
        <span class="bg-dark f-s-10 h-20 w-20 d-flex-center b-r-50">D</span>
        A fourth button item
    </button>

    <button class="list-group-item list-group-item-action d-flex gap-2" disabled type="button">
        <span class="bg-dark f-s-10 h-20 w-20 d-flex-center b-r-50">E</span>
        A disabled button item
    </button