List Menu

Group Heading - 1

An active item
Item - 1
Item - 2
Item - 3
Item - 4

Group Heading - 2

Item - 1
Item - 2
Item - 3
Item - 4

Copy

    
     <div class="row">
         <div class="col-lg-4 mt-3">
         <ul class="list-group card">
             <h6>Group Heading - 1 </h6>
             <li class="list-group-item active">An active item</li>
             <li class="list-group-item">Item - 1 </li>
             <li class="list-group-item">Item - 2</li>
             <li class="list-group-item">Item - 3</li>
             <li class="list-group-item">Item - 4</li>
             <h6>Group Heading - 2 </h6>
             <li class="list-group-item">Item - 1 </li>
             <li class="list-group-item">Item - 2</li>
             <li class="list-group-item">Item - 3</li>
             <li class="list-group-item">Item - 4</li>
           </ul>
       </div>
    </div>

Copy

                                       
  
 
      .list-group-item+.list-group-item {
       border-bottom: none;
     }
     
     .list-group-item {
       font-size: 14px;
       padding: 10px 15px;
       border: none;
     }
     .list-group-item.active {
       background: #167DF5;
     }
     .list-group-item:hover {
       background: #f6f9ff;
       cursor: pointer;
       color: #212529;
     }