<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <div class="container"> <div class="row"> <div class="col-3"> <div class="list-group filter-wrap"> <article class="list-group-item p-0"> <header class="filter-header"> <a href="#" data-toggle="collapse" data-target="#collapse1" class="collapsed d-flex" aria-expanded="false" style="text-decoration:none!important;"> <div class="col d-flex align-items-center h-100 m-0 p-0"> <img src="https://www.certiregalos.com/wp-content/uploads/2019/06/icon_hotel.svg" alt="Hoteles" class="w-50 h-50"> <h6 class="title d-inline w-50">Hoteles</h6> </div> <!--<div class="col d-flex h-100 m-0">--> <span class="badge badge-primary badge-pill m-2" style="max-height:1.1rem; font-size: 0.7em">4</span> <i class="icon-action fas fa-chevron-down m-2"></i> <!--</div>--> </a> </header> <div class="filter-content collapse" id="collapse1" style=""> <p> <ul> <li>Cristina Suites</li> <li>Chacao & Suites</li> <li>Continental</li> <li>Olé Caribe</li> </ul> </p> </div> </article> </div> </div> <div class="col-3"> <div class="list-group filter-wrap"> <article class="list-group-item p-0"> <header class="filter-header"> <a href="#" data-toggle="collapse" data-target="#collapse2" class="collapsed d-flex" aria-expanded="false" style="text-decoration:none!important;"> <div class="col d-flex align-items-center h-100 m-0 p-0"> <img src="https://www.certiregalos.com/wp-content/uploads/2019/06/icon_restaurant.svg" alt="Hoteles" class="w-50 h-50"> <h6 class="title d-inline w-50">Restaurantes</h6> </div> <!--<div class="col d-flex h-100 m-0">--> <span class="badge badge-primary badge-pill m-2" style="max-height:1.1rem; font-size: 0.7em">4</span> <i class="icon-action fas fa-chevron-down m-2"></i> <!--</div>--> </a> </header> <div class="filter-content collapse" id="collapse2" style=""> <p> <ul> <li>Yakitori</li> <li>El Guacho Grill</li> <li>Nobu</li> <li>Maute Grill</li> </ul> </p> </div> </article> </div> </div> <div class="col-3"> <div class="list-group filter-wrap"> <article class="list-group-item p-0"> <header class="filter-header"> <a href="#" data-toggle="collapse" data-target="#collapse3" class="collapsed d-flex" aria-expanded="false" style="text-decoration:none!important;"> <div class="col d-flex align-items-center h-100 m-0 p-0"> <img src="https://www.certiregalos.com/wp-content/uploads/2019/06/icon_market_2.svg" alt="Hoteles" class="w-50 h-50"> <h6 class="title d-inline w-50">Supermercados</h6> </div> <!--<div class="col d-flex h-100 m-0">--> <span class="badge badge-primary badge-pill m-2" style="max-height:1.1rem; font-size: 0.7em">3</span> <i class="icon-action fas fa-chevron-down m-2"></i> <!--</div>--> </a> </header> <div class="filter-content collapse" id="collapse3" style=""> <p> <ul style="margin-bottom: calc(1rem + 1.5rem);"> <li>Hong Kong</li> <li>Unicasa</li> <li>Ali Fung</li> </ul> </p> </div> </article> </div> </div> <div class="col-3"> <div class="list-group filter-wrap"> <article class="list-group-item p-0"> <header class="filter-header"> <a href="#" data-toggle="collapse" data-target="#collapse4" class="collapsed d-flex" aria-expanded="false" style="text-decoration:none!important;"> <div class="col d-flex align-items-center h-100 m-0 p-0"> <img src="https://www.certiregalos.com/wp-content/uploads/2019/06/icon_mall_2.svg" alt="Hoteles" class="w-50 h-50"> <h6 class="title d-inline w-50">Comercios</h6> </div> <!--<div class="col d-flex h-100 m-0">--> <span class="badge badge-primary badge-pill m-2" style="max-height:1.1rem; font-size: 0.7em">4</span> <i class="icon-action fas fa-chevron-down m-2"></i> <!--</div>--> </a> </header> <div class="filter-content collapse" id="collapse4" style=""> <p> <ul> <li>El Llantero</li> <li>Llanteros Unidos</li> <li>Tecno Store</li> <li>Multicosas 2011</li> </ul> </p> </div> </article> </div> </div> </div> </div>