<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 { border-left: 1px solid grey; height: 375px; } </style> <div class="w-50 px-3 py-3 pt-md-4 pb-md-5 mx-auto text-center"> <h1 class="display-4 font-weight-bold">Choose pricing plan</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"> <div class="row justify-content-center"> <div class="col-11"> <div class="row"> <div class="col-lg-5 col-md-8 col-sm-8 d-block m-auto"> <div class="text-primary" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="pt-2 pb-1" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div> <h1 class="pb-3 text-primary font-weight-bold">€0 <small class="text-muted">/ pm</small> </h1> <p class="pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a odio ultrices, semper augue vel, sagittis quam. Fusce sodales, massa a luctus molestie</p> <div class="row pb-5"> <div class="col-md-9 col-lg-7"> <button type="button" class="btn btn-lg btn-block btn-primary">Sign up for free</button> </div> </div> </div> </div> <div class="col-lg-1 d-none d-lg-block"> <div class="vl"></div> </div> <div class="col-lg-5 col-md-8 col-sm-8 d-block m-auto"> <div class="color-primary-text text-primary" style="font-size: 75px"> <i class="fa fa-check-circle"></i> </div> <div class="pt-2 pb-1" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <div> <h1 class="pb-3 color-primary-text text-primary font-weight-bold">€0 <small class="text-muted">/ pm</small> </h1> <p class="pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a odio ultrices, semper augue vel, sagittis quam. Fusce sodales, massa a luctus molestie</p> <div class="row pb-5"> <div class="col-md-9 col-lg-7"> <button type="button" class="btn btn-lg btn-block btn-primary">Sign up for free</button> </div> </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>