<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 ----------> <div class="container-fluid"> <h1>Choose Payment Method:</h1> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-vertical btn-group-lg" role="group"> <div class="form-check"> <input class="form-check-input" type="radio" name="paymentMethod" id="creditCard" value="creditCard"> <label class="form-check-label" for="creditCard"> Credit Card <span class="badge badge-primary" style="font-size: 20px;">CC</span> </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="paymentMethod" id="paypal" value="paypal"> <label class="form-check-label" for="paypal"> PayPal <span class="badge badge-success" style="font-size: 20px;">PP</span> </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="paymentMethod" id="googlePay" value="googlePay"> <label class="form-check-label" for="googlePay"> Google Pay <span class="badge badge-info" style="font-size: 20px;">GP</span> </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="paymentMethod" id="applePay" value="applePay"> <label class="form-check-label" for="applePay"> Apple Pay <span class="badge badge-warning" style="font-size: 20px;">AP</span> </label> </div> </div> </div> <div class="col-md-12"> <button type="button" class="btn btn-outline-danger btn-sm active btn-block"> Cancel </button> </div> </div> </div> <div class="col-md-4"> <div class="card bg-default"> <h5 class="card-header"> Payment </h5> <div class="card-body"> Product: Limited Edition 1953 Estonian Coin </div> <div class="card-footer"> <span>Order Total: 24,90€</span> </div> </div> <button type="button" class="btn btn-block btn-secondary btn-lg"> Pay </button> </div> </div> </div>

.container-fluid { width: 60%; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.5); } .btn { margin-top: 20px; } .form-check { padding:5px; font-size:30px; margin-left:30px; } .form-check-input { height:40px; width:15px; }

<div class="btn-group btn-group-vertical btn-group-lg" role="group"> <div class="col-md-8"> </div>