<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> .custom-radios div { display: inline-block; } .custom-radios input[type="radio"] { display: none; } .custom-radios input[type="radio"] + label { color: #333; font-family: Arial, sans-serif; font-size: 14px; } .custom-radios input[type="radio"] + label span { display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); background-repeat: no-repeat; background-position: center; text-align: center; line-height: 44px; } .custom-radios input[type="radio"] + label span img { opacity: 0; transition: all .3s ease; } .custom-radios input[type="radio"]#color-1 + label span { background-color: #3498db; } .custom-radios input[type="radio"]#color-2 + label span { background-color: #3498db; } .custom-radios input[type="radio"]#color-3 + label span { background-color: #3498db; } .custom-radios input[type="radio"]:checked + label span { opacity: 1; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg) center center no-repeat; width: 40px; height: 40px; display: inline-block; } .l-spacing { letter-spacing: 1px; font-weight: 500; } </style> <div class="container"> <div class="row justify-content-center text-center py-5"> <div class="col-lg-8 col-sm-10"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae enim at dui rutrum feugiat quis sed ante. Nullam ac convallis enim. Ut pharetra </p> </div> </div> <div class="row justify-content-center text-center"> <div class="col-lg-4 col-sm-8"> <h1>Personal</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae enim at dui rutrum feugiat quis sedante. Nullam ac convallis enim. Ut pharetra</p> <div class="row"> <div class="custom-radios d-block m-auto"> <p class="l-spacing">Choose your plan</p> <div class="col-lg-3 col-md-3 col-sm-3"> <div> <input type="radio" id="color-1" name="color" value="color-1"> <label for="color-1"> <span> </span> </label> <p> 50 Users </br> <span class="font-weight-bold">6$</span> </p> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <div> <input type="radio" id="color-2" name="color" value="color-2" checked> <label for="color-2"> <span> </span> </label> </div> <p> 50 Users </br> <span class="font-weight-bold">6$</span> </p> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <div> <input type="radio" id="color-3" name="color" value="color-3"> <label for="color-3"> <span> </span> </label> </div> <p> 50 Users </br> <span class="font-weight-bold">6$</span> </p> </div> </div> </div> <div class="pt-4"> <a role="button" class="btn btn-block btn-primary text-white w-75 m-auto p-2">Button</a> </div> </div> <div class="col-lg-1" style="height: 50px"></div> <div class="col-lg-4 col-sm-8"> <h1>Corporate</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae enim at dui rutrum feugiat quis sed ante. Nullam ac convallis enim. Ut pharetra</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae enim at dui rutrum feugiat quis sed ante. Nullam ac convallis enim. Ut pharetra</p> <p class="l-spacing">Call us now</p> <a role="button" class="btn btn-block w-75 btn-outline-primary text-primary color-primary-text m-auto p-2">Button</a> </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>