"E commerce Mobile Category Bootstrap Grid "
Bootstrap 3.0.0 Snippet by Anita26

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- mobile showcase --> <div class="space-medium"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <div class="showcase-block"> <div class="display-logo "> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/nexus.png" alt=""></a> </div> <div class="showcase-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_1.png" alt=""></a> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="showcase-block active"> <div class="display-logo alignleft"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/iphone.png" alt=""> </a> </div> <div class="showcase-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_2.png" alt="" style="padding-left: 80px;"></a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <div class="showcase-block "> <div class="display-logo "> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/samsung.png" alt=""> </a> </div> <div class="showcase-img"> <a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_3.png" alt=""> </a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="showcase-block"> <div class="display-logo "> <a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/htc.png" alt=""></a> </div> <div class="showcase-img"> <a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_4.png" alt=""></a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="showcase-block"> <div class="display-logo"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/alcatel.png" alt=""></a> </div> <div class="showcase-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_5.png" alt=""> </a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="showcase-block"> <div class="display-logo "> <a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/pixel.png" alt=""></a> </div> <div class="showcase-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_6.png" alt=""></a> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="showcase-block"> <div class="display-logo "> <a href="#"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/vivo.png" alt=""></a> </div> <div class="showcase-img"> <a href="#"><img src="https://easetemplate.com/free-website-templates/mobistore/images/display_img_7.png" alt=""></a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> Created for <a href="https://goo.gl/mwiEhG" target="_blank">easetemplate</a> </div></div> </div> </div> <!-- /.mobile showcase -->
/*---------------------------------- 1. Body / Typography ----------------------------------*/ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 0px; font-size: 16px; color: #848687; font-weight: 400; line-height: 30px; background-color: #f3f5f7; } h1, h2, h3, h4, h5, h6 { color: #1c1e1e; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Roboto Condensed', sans-serif; } h1 { font-size: 30px; line-height: 42px; } h2 { font-size: 24px; line-height: 32px; } h3 { font-size: 22px; line-height: 30px; } h4 { font-size: 18px; line-height: 26px; } h5 { font-size: 14px; font-weight: 400; } h6 { font-size: 12px; font-weight: 400; } p { margin: 0 0 24px; line-height: 1.8; } p:last-child { margin: 0px; } ul, ol { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: #1c1e1e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #fb730f; } .alignright { float: right; margin: 0px 0 20px 30px; } .alignleft { float: left; margin: 0px 20px 0px 0; } .showcase-block { margin-bottom: 30px; min-height: 300px; background-color: #e8eaec; padding: 30px 30px 0px 30px; text-align: center; } .showcase-img { padding-top: 18px; } .display-logo { margin-bottom: 30px; } .showcase-block:hover { background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); } .showcase-block.active { background-color: #fff; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10); }

Related: See More


Questions / Comments: