<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <div class="container"> <div class="row text-center"> <div class="col-sm-3"> <div class="pricing-wrapper "> <div class="pricing-table"> <div class="price-wrap"> <span class="price">299 GBP </span><small>/year</small> </div> <hr /> <span class="type"> BASIC PLAN </span> <hr /> <p> Aliquam et placerat odio. Nullam porttitor ante mauris, ac pellentesque dolor porta volutpat. </p> <hr /> <a href="#" class="btn btn-info">BOOK PLAN</a> </div> </div> </div> <div class="col-sm-3"> <div class="pricing-wrapper "> <div class="pricing-table"> <div class="price-wrap"> <span class="price">399 GBP </span><small>/year</small> </div> <hr /> <span class="type popular"> SILVER PLAN </span> <hr /> <p> Aliquam et placerat odio. Nullam porttitor ante mauris, ac pellentesque dolor porta volutpat. </p> <hr /> <a href="#" class="btn btn-info">BOOK PLAN</a> </div> </div> </div> <div class="col-sm-3"> <div class="pricing-wrapper "> <div class="pricing-table"> <div class="price-wrap"> <span class="price">499 GBP </span><small>/year</small> </div> <hr /> <span class="type"> GOLD PLAN </span> <hr /> <p> Aliquam et placerat odio. Nullam porttitor ante mauris, ac pellentesque dolor porta volutpat. </p> <hr /> <a href="#" class="btn btn-info">BOOK PLAN</a> </div> </div> </div> <div class="col-sm-3"> <div class="pricing-wrapper "> <div class="pricing-table"> <div class="price-wrap"> <span class="price">799 GBP </span><small>/year</small> </div> <hr /> <span class="type"> DIAMOND PLAN </span> <hr /> <p> Aliquam et placerat odio. Nullam porttitor ante mauris, ac pellentesque dolor porta volutpat. </p> <hr /> <a href="#" class="btn btn-info">BOOK PLAN</a> </div> </div> </div> </div> </div> <br/> <br/> <br/>

@import url('https://fonts.googleapis.com/css?family=Fira+Sans'); body { font-size: 16px; line-height: 25px; padding-top: 50px; font-family: 'Fira Sans', sans-serif; } .pricing-wrapper .pricing-table { border: 1px solid #5bc0de; padding: 20px; margin-top: 30px; background-color: #e9e9e9; } .pricing-wrapper .popular{ color: #5bc0de; } .pricing-wrapper hr { border-top: 1px solid #d0d0d0!important; } .pricing-wrapper .pricing-table .price-wrap{ background-color: #fff; padding: 40px 30px 40px 30px; } .pricing-wrapper .type{ font-weight: 900; font-size: 20px; } .pricing-wrapper .pricing-table .price { font-weight: 900; font-size: 30px; }