"Tour Package Cards - Bootstrap 4"
Bootstrap 4.1.1 Snippet by ReeZh

Post to Facebook Tweet this

<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 ----------> <!doctype html> <link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container py-5"> <div class="row py-3"> <div class="col-lg-12 text-center"> <h1>Tour Package Cards - Bootstrap 4</h1> </div> </div> <div class="row"> <div class="col-lg-12 text-center"> <h2>Style 1</h2> </div> </div> <div class="row tours"> <div class="tourcard"> <figure> <div class="tourpic"> <img width="320" height="180" src="https://placeimg.com/400/225/nature"> <span class="tourcat">Domestic</span> <span class="tourday hot">2d1n</span> </div> <figcaption> <h3 class="entry-title"> <a href="https://reezhdesign.com">Bandung, Indonesia</a></h3> <span class="description">Domestic Tour Package 2 Days 1 Night</span> <span class="tourprice"> <span class="currency">Rp. </span><span class="price">1.500.000</span> <span> / pax</span> </span> </figcaption> <div class="tourbtn"> <a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span> </a> <a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-phone fa-fw"></i><span>Call Us</span> </a> <a href="https://reezhdesign.com/" class="btn btn-sm"> <i class="fa fa-arrow-right fa-fw"></i><span>Read more</span> </a> </div> </figure> </div> <div class="tourcard"> <figure> <div class="tourpic"> <img width="320" height="180" src="https://placeimg.com/400/225/nature"> <span class="tourcat">Domestic</span> <span class="tourday">2d1n</span> </div> <figcaption> <h3 class="entry-title"> <a href="https://reezhdesign.com">Bandung, Indonesia</a></h3> <span class="description">Domestic Tour Package 2 Days 1 Night</span> <span class="tourprice"> <span class="currency">Rp. </span><span class="price">1.500.000</span> <span> / pax</span> </span> </figcaption> <div class="tourbtn"> <a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span> </a> <a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-phone fa-fw"></i><span>Call Us</span> </a> <a href="https://reezhdesign.com/" class="btn btn-sm"> <i class="fa fa-arrow-right fa-fw"></i><span>Read more</span> </a> </div> </figure> </div> </div> <div class="row pt-5"> <div class="col-lg-12 text-center"> <h2>Style 2</h2> </div> </div> <div class="row tours"> <div class="tourcard"> <figure> <div class="tourpic"> <img width="320" height="180" src="https://placeimg.com/400/225/nature"> <span class="tourcat">Domestic</span> <span class="tourday hot">2d1n</span> </div> <figcaption> <h3 class="entry-title"> <a href="https://reezhdesign.com">Bandung, Indonesia</a></h3> <span class="description">Domestic Tour Package 2 Days 1 Night</span> <span class="tourprice"> <span class="currency">Rp. </span><span class="price">1.500.000</span> <span> / pax</span> </span> </figcaption> <div class="tourbtn icon"> <a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span> </a> <a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-phone fa-fw"></i><span>Call Us</span> </a> <a href="https://reezhdesign.com/" class="btn btn-sm"> <i class="fa fa-arrow-right fa-fw"></i><span>Read more</span> </a> </div> </figure> </div> <div class="tourcard"> <figure> <div class="tourpic"> <img width="320" height="180" src="https://placeimg.com/400/225/nature"> <span class="tourcat">Domestic</span> <span class="tourday">2d1n</span> </div> <figcaption> <h3 class="entry-title"> <a href="https://reezhdesign.com">Bandung, Indonesia</a></h3> <span class="description">Domestic Tour Package 2 Days 1 Night</span> <span class="tourprice"> <span class="currency">Rp. </span><span class="price">1.500.000</span> <span> / pax</span> </span> </figcaption> <div class="tourbtn icon"> <a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span> </a> <a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-phone fa-fw"></i><span>Call Us</span> </a> <a href="https://reezhdesign.com/" class="btn btn-sm"> <i class="fa fa-arrow-right fa-fw"></i><span>Read more</span> </a> </div> </figure> </div> </div> <div class="row pt-5"> <div class="col-lg-12 text-center"> <h2>Style 3</h2> </div> </div> <div class="row tours"> <div class="tourcard"> <figure> <div class="tourpic"> <img width="320" height="180" src="https://placeimg.com/400/225/nature"> <span class="tourcat">Domestic</span> <span class="tourday hot">2d1n</span> </div> <figcaption> <h3 class="entry-title"> <a href="https://reezhdesign.com">Bandung, Indonesia</a></h3> <span class="description">Domestic Tour Package 2 Days 1 Night</span> <span class="tourprice"> <span class="currency">Rp. </span><span class="price">1.500.000</span> <span> / pax</span> </span> </figcaption> <div class="tourbtn"> <a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span> </a> <a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-phone fa-fw"></i><span>Call Us</span> </a> <a href="https://reezhdesign.com/" class="btn btn-sm"> <i class="fa fa-arrow-right fa-fw"></i><span>Read more</span> </a> </div> </figure> </div> <div class="tourcard"> <figure> <div class="tourpic"> <img width="320" height="180" src="https://placeimg.com/400/225/nature"> <span class="tourcat">Domestic</span> <span class="tourday hot">2d1n</span> </div> <figcaption> <h3 class="entry-title"> <a href="https://reezhdesign.com">Bandung, Indonesia</a></h3> <span class="description">Domestic Tour Package 2 Days 1 Night</span> <span class="tourprice"> <span class="currency">Rp. </span><span class="price">1.500.000</span> <span> / pax</span> </span> </figcaption> <div class="tourbtn"> <a href="//wa.me/6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-whatsapp fa-fw"></i><span>WhatsApp</span> </a> <a href="tel:6282127602518" class="btn btn-sm" target="_blank" rel="noreferrer"> <i class="fa fa-phone fa-fw"></i><span>Call Us</span> </a> <a href="https://reezhdesign.com/" class="btn btn-sm"> <i class="fa fa-arrow-right fa-fw"></i><span>Read more</span> </a> </div> </figure> </div> </div> </div> <!-- visit our site at https://reezhdesign.com -->
html, body { background: whitesmoke; color: darkgray; } a { color: #363636; } .btn { background: transparent; margin: 3px; border: 1px solid #eaeaea; border-radius: 0px; } .btn:hover { background: #eaeaea; color: black; } .tours { display: flex; padding: 0; flex-flow: row wrap; align-content: center; align-items: stretch; justify-content: center; } .tours > .tourcard { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); flex: 0 1 360px; margin: 15px; padding: 0; } .tours > .tourcard:hover { background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.5); cursor: pointer; } .tours > .tourcard figure { margin: 0; padding: 0; position: relative; flex: 1; display: flex; flex-flow: column nowrap; justify-content: space-around; width: 100%; } .tourpic { background: #444; position: relative; } .tourbtn { margin: 0; padding: 0; } .tourbtn:after { clear: both; } .tours > .tourcard figure .tourpic img { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; width: 100%; height: auto; margin: 0; padding: 0; opacity: .50; } .tours > .tourcard:hover figure .tourpic img { opacity: 0.9; } .tours > .tourcard figure .tourpic .tourcat { color: #fff; font-size: .8em; padding: 3px 5px; position: absolute; right: 15px; text-transform: uppercase; bottom: 15px; } .tours>.tourcard figure .tourpic .tourday { text-transform: uppercase; color: #fff; font-size: .8em; position: absolute; left: 15px; bottom: 15px; padding: 3px 5px; } .tours > .tourcard figure .tourpic .tourday.hot { background: #000; background: red; background: -webkit-linear-gradient(0deg,red,orange); background: linear-gradient(90deg,red,orange); background-size: 200% 200%; -webkit-animation: hot 10s ease infinite; -moz-animation: hot 10s ease infinite; -o-animation: hot 10s ease infinite; animation: hot 10s ease infinite; } .tours > .tourcard figure .tourbtn { background: transparent; display: flex; width: 100%; flex-flow: row wrap; align-content: center; } .tours > .tourcard figure .tourbtn a { flex: 1; } .tours > .tourcard figure .tourbtn.icon a span { display: none; } .tours > .tourcard figure figcaption { position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: 15px; margin: 0 0 30px; display: flex; flex-flow: column nowrap; color: white; } figcaption h3 a { text-decoration: none; color: white; } .description { opacity: 0; display: none; } .tourprice { opacity: 0; display: none; font-size: .8em; } .currency { font-weight: 300; } .price { font-size: 2em; font-weight: 300; } .tourcard:hover figure figcaption .description, .tourcard:hover figure figcaption .tourprice { display: block; opacity: 1; }

Related: See More

Paper Kit 2 PRO
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: