<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 ----------> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="w-50 px-3 py-3 pt-md-4 pb-md-4 mx-auto text-center"> <h1 class="font-weight-bold">Choose Pricing Plan</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna massa, ullamcorper quis libero non, semper convallis nisl. Nulla facilisi. Cras id tortor ex. Curabitur eget lectus fermentum, convallis massa pulvinar, mattis ex.</p> </div> <div class="container text-center"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item"> <div class="pt-4 pb-2" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="text-primary" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="pricing-description"> <ul class="list-unstyled mt-3 mb-1"> <li>30 users included</li> <li>15 GB of storage</li> <li>Phone and email support</li> <li>Help center access</li> </ul> </div> <div class="pricing-price pb-1 text-primary color-primary-text mb-3"> <h1 style="font-weight: 1000; font-size: 3.5em;"> <span style="font-size: 20px;">€</span>25 </h1> </div> <div class="pricing-button pb-4"> <button type="button" class="btn btn-lg btn-outline-primary w-75">Get started</button> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item" style=" box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.29);"> <div class="pt-4 pb-2" style="letter-spacing: 2px"> <h4>Intermediate</h4> </div> <div class="text-primary" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="pricing-description"> <ul class="list-unstyled mt-3 mb-1"> <li>30 users included</li> <li>15 GB of storage</li> <li>Phone and email support</li> <li>Help center access</li> </ul> </div> <div class="pricing-price pb-1 text-primary color-primary-text mb-3"> <h1 style="font-weight: 1000; font-size: 3.5em;"> <span style="font-size: 20px;">€</span>50 </h1> </div> <div class="pricing-button pb-4"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</button> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item"> <div class="pt-4 pb-2" style="letter-spacing: 2px"> <h4>Professional</h4> </div> <div class="text-primary" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="pricing-description"> <ul class="list-unstyled mt-3 mb-1"> <li>30 users included</li> <li>15 GB of storage</li> <li>Phone and email support</li> <li>Help center access</li> </ul> </div> <div class="pricing-price pb-1 text-primary color-primary-text mb-3"> <h1 style="font-weight: 1000; font-size: 3.5em;"> <span style="font-size: 20px;">€</span>125 </h1> </div> <div class="pricing-button pb-4"> <button type="button" class="btn btn-lg btn-outline-primary w-75">Get started</button> </div> </div> </div> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>