<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"> <div class="w-50 px-3 py-3 pt-md-4 pb-md-4 mx-auto text-center"> <h1 class="font-weight-bold">Pricing Plans</h1> </div> <div class="container text-center"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item"> <div class="pt-4" style="letter-spacing: 2px; font-size: 20px;"> <p class="mb-1" style="font-weight: 500;">FREE</p> </div> <div class="pricing-price pb-1 text-primary color-primary-text"> <h1 style="font-weight: 700; font-size: 3em; padding-right: 5px;"> <span style="font-size: 20px;">€</span>0 </h1> </div> <p style="color: grey; letter-spacing: 1px; font-weight: 500; opacity: 0.5;">PER MAAND</p> <div class="pricing-description" style="color: grey;"> <ul class="list-unstyled mt-3 mb-4"> <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-button pb-4"> <button type="button" class="btn btn-lg btn-outline-primary w-75">Button</button> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item"> <div class="pt-4" style="letter-spacing: 2px; font-size: 20px;"> <p class="mb-1" style="font-weight: 500;">BASIC</p> </div> <div class="pricing-price pb-1 text-primary color-primary-text"> <h1 style="font-weight: 700; font-size: 3em; padding-right: 5px;"> <span style="font-size: 20px;">€</span>7 </h1> </div> <p style="color: grey; letter-spacing: 1px; font-weight: 500; opacity: 0.5;">PER MAAND</p> <div class="pricing-description" style="color: grey;"> <ul class="list-unstyled mt-3 mb-4"> <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-button pb-4"> <button type="button" class="btn btn-lg btn-outline-primary w-75">Button</button> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item"> <div class="pt-4" style="letter-spacing: 2px; font-size: 20px;"> <p class="mb-1" style="font-weight: 500;">ADVANCED</p> </div> <div class="pricing-price pb-1 text-primary color-primary-text"> <h1 style="font-weight: 700; font-size: 3em; padding-right: 5px;"> <span style="font-size: 20px;">€</span>9 </h1> </div> <p style="color: grey; letter-spacing: 1px; font-weight: 500; opacity: 0.5;">PER MAAND</p> <div class="pricing-description" style="color: grey;"> <ul class="list-unstyled mt-3 mb-4"> <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-button pb-4"> <button type="button" class="btn btn-lg btn-outline-primary w-75">Button</button> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item"> <div class="pt-4" style="letter-spacing: 2px; font-size: 20px;"> <p class="mb-1" style="font-weight: 500;">PROFESSIONAL</p> </div> <div class="pricing-price pb-1 text-primary color-primary-text"> <h1 style="font-weight: 700; font-size: 3em; padding-right: 5px;"> <span style="font-size: 20px;">€</span>15 </h1> </div> <p style="color: grey; letter-spacing: 1px; font-weight: 500; opacity: 0.5;">PER MAAND</p> <div class="pricing-description" style="color: grey;"> <ul class="list-unstyled mt-3 mb-4"> <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-button pb-4"> <button type="button" class="btn btn-lg btn-outline-primary w-75">Button</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>