<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 ----------> <section id="pricing" class="padd-section text-center wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;"> <div class="container"> <div class="section-title text-center"> <h2>Our Pricing</h2> <p class="separator">Detailed pricing of our products.</p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-3"> <div class="block-pricing"> <div class="table"> <h4>basic</h4> <h2>$29</h2> <ul class="list-unstyled"> <li><b>4 GB</b> Ram</li> <li><b>7/24</b> Tech Support</li> <li><b>40 GB</b> SSD Cloud Storage</li> <li>Monthly Backups</li> <li>Palo Protection</li> </ul> <div class="table_btn"> <a href="#" class="btn"><i class="fa fa-shopping-cart"></i> Buy Now</a> </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="block-pricing"> <div class="table"> <h4>PERSONAL</h4> <h2>$39</h2> <ul class="list-unstyled"> <li><b>8 GB</b> Ram</li> <li><b>7/24</b> Tech Support</li> <li><b>80 GB</b> SSD Cloud Storage</li> <li>Monthly Backups</li> <li>Palo Protection</li> </ul> <div class="table_btn"> <a href="#" class="btn"><i class="fa fa-shopping-cart"></i> Buy Now</a> </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="block-pricing"> <div class="table"> <h4>BUSINESS</h4> <h2>$49</h2> <ul class="list-unstyled"> <li><b>12 GB</b> Ram</li> <li><b>7/24</b> Tech Support</li> <li><b>120 GB</b> SSD Cloud Storage</li> <li>Monthly Backups</li> <li>Palo Protection</li> </ul> <div class="table_btn"> <a href="#" class="btn"><i class="fa fa-shopping-cart"></i> Buy Now</a> </div> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="block-pricing"> <div class="table"> <h4>professional</h4> <h2>$59</h2> <ul class="list-unstyled"> <li><b>16 GB</b> Ram</li> <li><b>7/24</b> Tech Support</li> <li><b>160 GB</b> SSD Cloud Storage</li> <li>Monthly Backups</li> <li>Palo Protection</li> </ul> <div class="table_btn"> <a href="#" class="btn"><i class="fa fa-shopping-cart"></i> Buy Now</a> </div> </div> </div> </div> </div> </div> </section>

.padd-section { padding-top: 50px; padding-bottom: 50px } .section-title { margin-bottom: 0px } #pricing .block-pricing { background: #fff; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.19); display: inline-block; position: relative; width: 100% } #pricing .block-pricing .table { margin-bottom: 0; padding: 30px 15px; max-width: 100%; width: 100% } #pricing .block-pricing .table h4 { padding-bottom: 30px } h4 { color: #000; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; line-height: 2 } #pricing .block-pricing h2 { margin-bottom: 30px } h2 { color: #000; font-weight: 600 } #pricing .block-pricing ul { list-style: outside none none; margin: 10px auto; max-width: 240px; padding: 0 } #pricing .block-pricing ul li { border-bottom: 1px solid rgba(153, 153, 153, 0.3); padding: 12px 0; text-align: center } li { color: #626262; font-size: 13px; font-weight: 400; letter-spacing: 2px; line-height: 30px; text-transform: capitalize } #pricing .block-pricing .table .table_btn a { background: #ff7361; color: #fff; margin: 0; display: inline-block } .btn { border: 1px solid #fff; border-radius: 50px; color: #fff; font-size: 11px; font-weight: 600; padding: 15px 40px; text-transform: uppercase; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s }