<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> .vl-d { background-color: grey; height: 475px; width: 1px; } </style> <div class="w-50 px-3 py-3 pt-md-4 pb-md-4 mx-auto text-center"> <h1 class="display-4 font-weight-bold">Pricing</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna massa, ullamcorper quis libero non, semper convallis nisl. Nulla facilisi. Cras id tortor ex. Curabitur eget lectus fermentum, convallis massa pulvinar, mattis ex.</p> </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 pb-1" style="letter-spacing: 2px"> <h4>Beginner</h4> </div> <div class="text-primary" style="font-size: 125px"> <i class="fa fa-check-circle"></i> </div> <div class="pricing-price pb-1"> <h1 style="font-weight: 850; font-size: 3em;"> €15 </h1> </div> <div class="pricing-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique dignissim pulvinar. Vestibulum maximus, libero in gravida dignissim.</p> </div> <div class="pricing-button pb-4 pt-3"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</button> </div> </div> </div> <div class="col-lg-1 d-none d-lg-block"> <div class="vl-d d-block m-auto"></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 pb-1" style="letter-spacing: 2px"> <h4>Intermediate</h4> </div> <div class="text-primary" style="font-size: 125px"> <i class="fa fa-check-circle"></i> </div> <div class="pricing-price pb-1"> <h1 style="font-weight: 850; font-size: 3em;"> €25 </h1> </div> <div class="pricing-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique dignissim pulvinar. Vestibulum maximus, libero in gravida dignissim.</p> </div> <div class="pricing-button pb-4 pt-3"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</button> </div> </div> </div> <div class="col-lg-1 d-none d-lg-block"> <div class="vl-d d-block m-auto"></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 pb-1" style="letter-spacing: 2px"> <h4>Professional</h4> </div> <div class="text-primary" style="font-size: 125px"> <i class="fa fa-check-circle"></i> </div> <div class="pricing-price pb-1"> <h1 style="font-weight: 850; font-size: 3em;"> €40 </h1> </div> <div class="pricing-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique dignissim pulvinar. Vestibulum maximus, libero in gravida dignissim.</p> </div> <div class="pricing-button pb-4 pt-3"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</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>