<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"> <style> .l-col > h5, .r-col > h5 { font-weight: 500; } </style> <div class="w-50 px-3 py-3 pt-md-4 pb-md-4 mx-auto text-center"> <h1 class="pb-4 font-weight-bold">Pricing Plans</h1> </div> <div class="container text-center"> <div class="row"> <div class="col-lg-4 col-md-4 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" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="pricing-price pb-4"> <h1 class="text-primary color-primary-text" style="font-weight: 1000; font-size: 3.5em;"> €10 </h1> <h5 style="color: grey; font-weight: 400;">Per maand</h5> </div> <div class="pricing-description" style="border-top: 1px solid whitesmoke"> <div class="row py-4" style="color: silver"> <div class="col-lg-6 l-col" style="text-align: left; padding-left: 40px"> <h5>Users</h5> <h5>Capacity</h5> <h5>Backup</h5> <h5>Support</h5> </div> <div class="col-lg-6 r-col" style="text-align: right; padding-right: 40px"> <h5>100</h5> <h5>500 Gb</h5> <h5>Not available</h5> <h5>Not available</h5> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 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" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="pricing-price pb-4"> <h1 class="text-primary color-primary-text" style="font-weight: 1000; font-size: 3.5em;"> €10 </h1> <h5 style="color: grey; font-weight: 400;">Per maand</h5> </div> <div class="pricing-description" style="border-top: 1px solid whitesmoke"> <div class="row py-4" style="color: silver"> <div class="col-lg-6 l-col" style="text-align: left; padding-left: 40px"> <h5>Users</h5> <h5>Capacity</h5> <h5>Backup</h5> <h5>Support</h5> </div> <div class="col-lg-6 r-col" style="text-align: right; padding-right: 40px"> <h5>100</h5> <h5>500 Gb</h5> <h5>Not available</h5> <h5>Not available</h5> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4 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" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div class="pricing-price pb-4"> <h1 class="text-primary color-primary-text" style="font-weight: 1000; font-size: 3.5em;"> €10 </h1> <h5 style="color: grey; font-weight: 400;">Per maand</h5> </div> <div class="pricing-description" style="border-top: 1px solid whitesmoke"> <div class="row py-4" style="color: silver"> <div class="col-lg-6 l-col" style="text-align: left; padding-left: 40px"> <h5>Users</h5> <h5>Capacity</h5> <h5>Backup</h5> <h5>Support</h5> </div> <div class="col-lg-6 r-col" style="text-align: right; padding-right: 40px"> <h5>100</h5> <h5>500 Gb</h5> <h5>Not available</h5> <h5>Not available</h5> </div> </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>