<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"> <style> @media (min-width: 768px) { .pricing-item-border-1, .pricing-item-border-3 { border-right: 1px solid whitesmoke; } } @media (min-width: 992px) { .pricing-item-border-1, .pricing-item-border-2, .pricing-item-border-3 { border-right: 1px solid whitesmoke; } } </style> <div class="w-50 py-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-8 py-4 pricing-item-border-1 m-auto"> <h4>Basic</h4> <div class="text-primary pt-2" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="w-75 d-block m-auto pt-3"> <p> At half-past eight the door opened, the policeman appeared.</p> </div> <h1 class="font-weight-bold text-primary" style="font-size:3em;"> <small>€</small>10 </h1> <div class="row pt-3"> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Gebruikers</b></span> <span class="float-right pr-4">100</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Capaciteit</b></span> <span class="float-right pr-4">500 GB</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Backup</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Support</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> </div> <div class="pt-4"> <a role="button" class="btn btn-block btn-outline-primary m-auto" style="width:85%; padding: 10px">Button</a> </div> </div> <div class="col-lg-3 col-md-6 col-sm-8 py-4 pricing-item-border-2 m-auto"> <h4>Basic</h4> <div class="text-primary pt-2" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="w-75 d-block m-auto pt-3"> <p> At half-past eight the door opened, the policeman appeared.</p> </div> <h1 class="font-weight-bold text-primary" style="font-size:3em;"> <small>€</small>10 </h1> <div class="row pt-3"> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Gebruikers</b></span> <span class="float-right pr-4">100</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Capaciteit</b></span> <span class="float-right pr-4">500 GB</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Backup</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Support</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> </div> <div class="pt-4"> <a role="button" class="btn btn-block btn-outline-primary m-auto" style="width:85%; padding: 10px">Button</a> </div> </div> <div class="col-lg-3 col-md-6 col-sm-8 py-4 pricing-item-border-3 m-auto"> <h4>Basic</h4> <div class="text-primary pt-2" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="w-75 d-block m-auto pt-3"> <p> At half-past eight the door opened, the policeman appeared.</p> </div> <h1 class="font-weight-bold text-primary" style="font-size:3em;"> <small>€</small>10 </h1> <div class="row pt-3"> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Gebruikers</b></span> <span class="float-right pr-4">100</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Capaciteit</b></span> <span class="float-right pr-4">500 GB</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Backup</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Support</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> </div> <div class="pt-4"> <a role="button" class="btn btn-block btn-outline-primary m-auto" style="width:85%; padding: 10px">Button</a> </div> </div> <div class="col-lg-3 col-md-6 col-sm-8 py-4 pricing-item-border-4 m-auto"> <h4>Basic</h4> <div class="text-primary pt-2" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="w-75 d-block m-auto pt-3"> <p> At half-past eight the door opened, the policeman appeared.</p> </div> <h1 class="font-weight-bold text-primary" style="font-size:3em;"> <small>€</small>10 </h1> <div class="row pt-3"> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Gebruikers</b></span> <span class="float-right pr-4">100</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Capaciteit</b></span> <span class="float-right pr-4">500 GB</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Backup</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> <div class="col-lg-12"> <div class=""> <span class="float-left pl-4"><b>Support</b></span> <span class="float-right pr-4">Niet beschikbaar</span> </div> </div> </div> <div class="pt-4"> <a role="button" class="btn btn-block btn-outline-primary m-auto" style="width:85%; padding: 10px">Button</a> </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>