<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; font-size: 17px; color: silver; } .pricing-border { border: 1px solid rgb(211,211,211,0.5); } .pricing-border-top { border-top: 1px solid rgb(211,211,211,0.5); } </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-6 col-sm-10 pb-4 d-block m-auto p-0"> <div class="pricing-item pricing-border"> <div class="pt-4"> <h4 style="letter-spacing: 2px;">Basic</h4> </div> <div class="pricing-price pb-4"> <h1 class="text-primary color-primary-text font-weight-bold mb-0" style="font-size: 3em;"> €10 </h1> <p style="color: grey; font-weight: 400; font-size:19px">per maand</p> <h5 class="w-75 pt-2 d-block m-auto" style="color: silver; font-weight: 400; font-size: 17px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel orci vitae dui. </h5> </div> <div class="pricing-description pricing-border-top"> <div class="row py-4"> <div class="col-lg-6 col-sm-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 col-sm-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> <button class="btn btn-outline-primary btn-block mx-auto mb-3" style="width:90%; padding-top:10px; padding-bottom: 10px;">Button </button> </div> </div> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto p-0"> <div class="pricing-item pricing-border"> <div class="pt-4"> <h4 style="letter-spacing: 2px;">Basic</h4> </div> <div class="pricing-price pb-4"> <h1 class="text-primary color-primary-text font-weight-bold mb-0" style="font-size: 3em;"> €10 </h1> <p style="color: grey; font-weight: 400; font-size:19px">per maand</p> <h5 class="w-75 pt-2 d-block m-auto" style="color: silver; font-weight: 400; font-size: 17px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel orci vitae dui. </h5> </div> <div class="pricing-description pricing-border-top"> <div class="row py-4"> <div class="col-lg-6 col-sm-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 col-sm-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> <button class="btn btn-outline-primary btn-block mx-auto mb-3" style="width:90%; padding-top:10px; padding-bottom: 10px;">Button </button> </div> </div> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto p-0"> <div class="pricing-item pricing-border"> <div class="pt-4"> <h4 style="letter-spacing: 2px;">Basic</h4> </div> <div class="pricing-price pb-4"> <h1 class="text-primary color-primary-text font-weight-bold mb-0" style="font-size: 3em;"> €10 </h1> <p style="color: grey; font-weight: 400; font-size:19px">per maand</p> <h5 class="w-75 pt-2 d-block m-auto" style="color: silver; font-weight: 400; font-size: 17px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel orci vitae dui. </h5> </div> <div class="pricing-description pricing-border-top"> <div class="row py-4"> <div class="col-lg-6 col-sm-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 col-sm-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> <button class="btn btn-outline-primary btn-block mx-auto mb-3" style="width:90%; padding-top:10px; padding-bottom: 10px;">Button </button> </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>