<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 ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-12 col-lg-3"> <div id="categorypanel" class="card bg-light mb-3"> <div id="categoryhead" class="card-header bg-primary text-white" data-toggle="collapse" href="#categorylist" aria-expanded="false" aria-controls="categorylist" role="button"><i class="fa fa-list"></i> Catálogo</div> <div class="collapse show" id="categorylist"> <ul class="list-group"> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Memorias USB <span class="float-right">13</span></li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Escritorio y oficinas</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Ecológicos</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Auto</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Herramientas</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Antiestrés</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Resaltadores</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Viaje</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Premium en cuero</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Lapicero</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Textiles</li> </a> <a href="#"> <li class="list-group-item btn btn-outline-primary text-left">Varios</li> </a> </ul> </div> <div id="ismobile" class="d-block d-md-block d-lg-none"></div> </div> </div> <div class="col"> <div id="productarea" class="row"> <!-- Product Area --> <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title"><a href="product.html" title="View Product">Product title</a></h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="form-row"> <div class="col"> <select class="form-control btn-block"> <option>50</option> <option>100</option> <option>200</option> <option>300</option> <option>400</option> <option>500</option> <option>600</option> </select> </div> <div class="col"> <a href="#" class="btn btn-success btn-block">Add to cart</a> </div> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title"><a href="product.html" title="View Product">Product title</a></h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="row"> <div class="col"> <p class="btn btn-danger btn-block">99.00 $</p> </div> <div class="col"> <a href="#" class="btn btn-success btn-block">Add to cart</a> </div> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title"><a href="product.html" title="View Product">Product title</a></h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="row"> <div class="col"> <p class="btn btn-danger btn-block">99.00 $</p> </div> <div class="col"> <a href="#" class="btn btn-success btn-block">Add to cart</a> </div> </div> </div> </div> </div> <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3"> <div class="card"> <img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title"><a href="product.html" title="View Product">Product title</a></h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="row"> <div class="col"> <p class="btn btn-danger btn-block">99.00 $</p> </div> <div class="col"> <a href="#" class="btn btn-success btn-block">Add to cart</a> </div> </div> </div> </div> </div> </div> </div> </div> </div>