<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mb-5 mt-5"> <div class="pricing card-deck flex-column flex-md-row mb-3"> <div class="card card-pricing popular shadow text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">EXPRESS</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">6</span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>Estimated delivery time:</li> <li>10 oct 10:20</li> </ul> <p><small>Final delivery date and time will be confirmed after payment</small></p> <a href="#" target="_blank" class="btn btn-primary mb-3">Order Now</a> </div> </div> <div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">REGULAR</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">9</span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>Estimated delivery time:</li> <li>10 oct 10:20</li> </ul> <p><small>Final delivery date and time will be confirmed after payment</small></p> <a href="#" target="_blank" class="btn btn-primary mb-3">Order Now</a> </div> </div> </div> </div>

.card-pricing.popular { z-index: 1; border: 3px solid #007bff; } .card-pricing .list-unstyled li { padding: .5rem 0; color: #6c757d; }