<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"> <div class="row"> <div class="col-lg-12 my-3"> <div class="pull-right"> <div class="btn-group"> <button class="btn btn-info" id="list"> <i class="fa fa-bars" aria-hidden="true"></i> </button> <button class="btn btn-danger" id="grid"> <i class="fa fa-th-large" aria-hidden="true"></i> </button> </div> </div> </div> </div> <div id="products" class="row view-group"> <div class="item col-xs-4 col-lg-4"> <div class="thumbnail card"> <div class="img-event"> <div class="label"> <p>New</p> </div> <div class="img-label"> <img class="group list-group-image img-fluid" src="img/shop-page/List-Grid View/1.jpg" alt="" /> </div> </div> <div class="caption card-body"> <p class="group inner list-group-item-text"> Crumpler The Drewbob 200 </p> <div class="row"> <div class="col-xs-12 col-md-12"> <p class="lead"> $425.00 </p> </div> <div class="col-xs-12 col-md-12"> <div class="rate-grid"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div> </div> </div> </div> <div class="add-cart"> <p>Simple, practical, timeless design made case suitable for digital cameras with removable lenses up to 30mm and accessories. The top...</p> <div class="cart-btn"> <button type="button" class="btn btn-dark">Add to cart</button> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> <i class="fa fa-search" aria-hidden="true"></i> </button> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> <i class="fa fa-heart-o" aria-hidden="true"></i> </button> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> <i class="fa fa-compress" aria-hidden="true"></i> </button> </div> </div> </div> </div> </div> </div>

.view-group { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; padding-left: 0; margin-bottom: 0; } .thumbnail { margin-bottom: 30px; padding: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .item.list-group-item { float: none; width: 100%; background-color: #fff; margin-bottom: 30px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 1rem; border: 0; } .item.list-group-item .img-event { float: left; width: 30%; } .item.list-group-item .list-group-image { margin-right: 10px; } .item.list-group-item .thumbnail { margin-bottom: 0px; display: inline-block; } .item.list-group-item .caption { float: left; width: 70%; margin: 0; padding-left: 0; } .item.list-group-item:before, .item.list-group-item:after { display: table; content: " "; } .item.list-group-item:after { clear: both; } button#list { background: white; color: #293341; padding: 14px 20px; border: 1px solid #eee; font-size: 20px; } button#grid { background: white; color: #293341; padding: 14px 20px; border: 1px solid #eee; font-size: 20px; } button#grid:hover { color: rgb(238, 26, 26); } button#list:hover { color: rgb(238, 26, 26); } .pull-right { margin-top: 38px; border: 1px solid #eee; width: 100%; } .rate-grid { color: #ffbb04; text-align: center; font-size: 15px; margin-top: 7px; } .thumbnail.card { border: 0; } p.group.inner.list-group-item-text { font-family: Poppins; font-size: 17px; line-height: 28px; text-align: center; font-weight: 500; color: #293341; margin-bottom: 0; } .item.col-xs-4.col-lg-4.grid-group-item { margin-top: 0; } p.lead { text-align: center; margin-top: 7px; font-size: 16px; font-family: Poppins; color: #7b7b7b; margin-bottom: 0; } .item.col-xs-4.col-lg-4 { margin: 0; } .label p { color: #fff; text-align: center; font-size: 11px; font-family: Poppins; font-weight: 500; text-transform: uppercase; } .label { position: absolute; margin: 23px; background: #27ae60; border: 1px #27ae60; width: 41px; height: 20px; padding: 3px; } .add-cart p { font-size: 16px; line-height: 30px; color: #7b7b7b; font-weight: 300; } .img-label img { height: 293px; } button.btn.btn-dark { background: #293341; font-size: 13px; letter-spacing: 3px; font-family: Poppins; padding: 16px 28px; border-radius: 1px; font-weight: 500; text-transform: uppercase; } button.btn.btn-primary { background: #fff; border: 1px solid #eee; border-radius: 1px; width: 56px; color: #aaa599; font-size: 16px; height: 53px; margin: 6px; } .grid-group-item .caption.card-body p { text-align: center; } .list-group-item .caption.card-body p { text-align: left; } .grid-group-item .rate-grid { text-align: center; } .list-group-item .rate-grid { text-align: left; } .grid-group-item .add-cart, .add-cart { display: none; } .list-group-item .add-cart { display: block; } img.group.list-group-image.img-fluid:hover { -webkit-transform: none; transform: none; }

$(document).ready(function() { $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');$('#products .item').removeClass('grid-group-item');}); $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');}); });