<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="container-fluid py-4" style="background-color: #467BBD"> <div class="w-50 px-3 pb-md-1 pt-4 mx-auto text-center text-white"> <h1 class="font-weight-bold">Select your plan</h1> <!-- OPTIE YEARLY PLAN --> <!-- <p class="lead pt-3">--> <!-- <span>Monthly</span>--> <!-- <span class="pl-3">Yearly</span>--> <!-- </p>--> </div> <div class="container text-center pb-5 pt-5"> <div class="row"> <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); background-color: white; border-radius: 5px"> <div class="pt-4 pb-1" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="pricing-price pb-1 text-primary color-primary-text "> <h1 class="pb-1 text-primary font-weight-bold" style="font-size: 50px">€0<small style="font-size: 30px">/pm</small> </h1> </div> <div class="pricing-description"> <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">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); background-color: white; border-radius: 5px"> <div class="pt-4 pb-1" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="pricing-price pb-1 text-primary color-primary-text "> <h1 class="pb-1 text-primary font-weight-bold" style="font-size: 50px">€0<small style="font-size: 30px">/pm</small> </h1> </div> <div class="pricing-description"> <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">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); background-color: white; border-radius: 5px"> <div class="pt-4 pb-1" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="pricing-price pb-1 text-primary color-primary-text "> <h1 class="pb-1 text-primary font-weight-bold" style="font-size: 50px">€0<small style="font-size: 30px">/pm</small> </h1> </div> <div class="pricing-description"> <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">Get started</button> </div> </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>