"Travel box grid"
Bootstrap 3.3.0 Snippet by sachin6185

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="destination-list"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-md-3 col-xs-12"> <div class="tour-cate"> <img src="https://cashkaro.com/blog/wp-content/uploads/sites/5/2018/07/Shillong-1.jpg" /> <div class="description"> <h1>RoopKund Uttrakhand, India</h1> <div class="priceing-info"> <span>Start From:</span> <span>₹ 14500/p</span> </div> <div class="tour-tag">Treeking</div> </div> </div> </div> </div> </div> </div>
::root{ btnStyle:#ff6600 } .destination-list{width:100%;float:left;padding:10px 0} .destination-list .tour-cate{ display: flex; flex-direction: column; border-radius: 15px; border: 1px solid #dfdddd; margin-top:25px ; } .destination-list .tour-cate .description{ background: #fff; padding: 15px 10px; position: relative; border-radius: 15px 15px 0 0; margin-top: -15px; position: relative; } .destination-list .tour-cate .description h1{margin:0px;padding: 16px 0px;font-size: 15px;line-height: 21px;color: #3D3D3D;font-weight: bold;} .destination-list .tour-cate .description .priceing-info span{width:50%;padding: 10px 15px 10px 0;/* vertical-align: middle; *//* display: grid; */font-size: 15px;display: inline-block;color: #7c7c7c;} .destination-list .tour-cate .description .priceing-info span:last-child{text-align:center;float: right;border: 1px solid #545151;padding: 5px 15px;border-radius: 30px;font-size: 18px;font-weight: bold;color: #3d3d3d;border: 1px solid #dfdddd;} .destination-list .tour-cate .description .priceing-info{ margin: 15px 0; justify-content: left; align-items: center; width: 100%; float: left; } .destination-list .tour-cate img { max-width: 100%; border-radius: 15px 15px 0 0;} .destination-list .tour-tag { background: #ff6600; width: 60%; left: 0; right: 0; position: absolute; top: -20px; left: 0; right: 0; margin: 0 auto; text-align: center; padding: 7px 35px; color: #fff; font-size: 17px; border-radius: 30px; }

Related: See More


Questions / Comments: