<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="container"> <div class="row justifycenter m-t-b-5"> <div class="col-md-4 pl-5 pr-5 mt-3"> <div class="pricing_cards"> <div class="pricing_header"> <h2>Basic</h2> <h3>$5 /Month</h3> </div> <div class="pricing_body"> <ul> <li>Access To Extra, Bloom & Monarch</li> <li>Hundreds Of Website Packs</li> <li>Product Updates</li> <li>Premium Support</li> <li>Unlimited Website Usage</li> <li>Risk-Free Guarantee</li> </ul> </div> <div class="pricing_footer"> <a class="btn buy-btn">Buy</a> </div> </div> </div> <div class="col-md-4 mt-3 pl-5 pr-5"> <div class="pricing_cards"> <div class="pricing_header"> <h2>Advance</h2> <h3>$15 /Month</h3> <span class="popular-tag">POPULAR</span> </div> <div class="pricing_body"> <ul> <li>Access To Extra, Bloom & Monarch</li> <li>Hundreds Of Website Packs</li> <li>Product Updates</li> <li>Premium Support</li> <li>Unlimited Website Usage</li> <li>Risk-Free Guarantee</li> <li>One Time Fee</li> </ul> </div> <div class="pricing_footer"> <a class="btn buy-btn">Buy</a> </div> </div> </div> <div class="col-md-4 mt-3 pl-5 pr-5"> <div class="pricing_cards"> <div class="pricing_header"> <h2>Premium</h2> <h3>$20 /Month</h3> </div> <div class="pricing_body"> <ul> <li>Access To Extra, Bloom & Monarch</li> <li>Hundreds Of Website Packs</li> <li>Product Updates</li> <li>Premium Support</li> <li>Unlimited Website Usage</li> <li>Risk-Free Guarantee</li> <li>One Time Fee</li> </ul> </div> <div class="pricing_footer"> <a class="btn buy-btn">Buy</a> </div> </div> </div> </div> </div>

.m-t-b-5{ margin-top: 3em; margin-bottom: 3em; } .mt-3{ margin-top: 1.5em; } .justifycenter{ justify-content: center; } .pricing_cards{ height: 550px; box-shadow: 0px 5px 12px 2px rgb(192, 192, 197); } .pl-5{ padding-left: 3em; } .pr-5{ padding-right: 3em; } .pricing_header{ padding: 1.4em; background: #8fa6e6; text-align: center; color: #fff; border-bottom: 3px solid #395194; position: relative; overflow: hidden; } .pricing_header h2, .pricing_header h3{ margin: 0; letter-spacing: 1px; margin-bottom: 0.5em; } .pricing_body ul{ } .pricing_body ul li{ margin-bottom: 1.25em; color: #242e4a; } .pricing_body{ height: 280px; } .pricing_body ul { list-style-image: none; list-style: none; padding: 0px 0px 0px 10px; margin-top: 50px; list-style: outside none none; } .pricing_body ul li:before{ content:'\2713'; line-height: 1; font-weight: bolder; margin-right: 1em; } .pricing_footer{ border-top: 1px solid #b7b0b0; text-align: center; } .buy-btn{ margin-top: 2em; color: #fff; background-color: #395194; padding-left: 2.5em; padding-right: 2.5em; border-radius: 30px; border:1px solid #395194; box-shadow: 0px 5px 12px 2px rgb(192, 192, 197); transition: all 0.3s linear; } .buy-btn:hover, .buy-btn:focus{ background-color: #fff; border:1px solid #395194; color: #395194; } .popular-tag{ position: absolute; top: -15px; right: -46px; transform: rotate(45deg); background: white; color: #8fa6e6; width: 120px; height: 60px; line-height: 8em; font-size: 12px; } @media (max-width:991px) and (min-width:590px) { .pl-5{ padding-left: 10em; } .pr-5{ padding-right: 10em; } }?