<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <div class="container"> <br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com</a></p> <hr> <div class="row"> <aside class="col-sm-6"> <p>Payment form1</p> <article class="card"> <div class="card-body p-5"> <p> <img src="http://bootstrap-ecommerce.com/main/images/icons/pay-visa.png"> <img src="http://bootstrap-ecommerce.com/main/images/icons/pay-mastercard.png"> <img src="http://bootstrap-ecommerce.com/main/images/icons/pay-american-ex.png"> </p> <p class="alert alert-success">Some text success or error</p> <form role="form"> <div class="form-group"> <label for="username">Full name (on the card)</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-user"></i></span> </div> <input type="text" class="form-control" name="username" placeholder="" required=""> </div> <!-- input-group.// --> </div> <!-- form-group.// --> <div class="form-group"> <label for="cardNumber">Card number</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-credit-card"></i></span> </div> <input type="text" class="form-control" name="cardNumber" placeholder=""> </div> <!-- input-group.// --> </div> <!-- form-group.// --> <div class="row"> <div class="col-sm-8"> <div class="form-group"> <label><span class="hidden-xs">Expiration</span> </label> <div class="form-inline"> <select class="form-control" style="width:45%"> <option>MM</option> <option>01 - Janiary</option> <option>02 - February</option> <option>03 - February</option> </select> <span style="width:10%; text-align: center"> / </span> <select class="form-control" style="width:45%"> <option>YY</option> <option>2018</option> <option>2019</option> </select> </div> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label data-toggle="tooltip" title="" data-original-title="3 digits code on back side of the card">CVV <i class="fa fa-question-circle"></i></label> <input class="form-control" required="" type="text"> </div> <!-- form-group.// --> </div> </div> <!-- row.// --> <button class="subscribe btn btn-primary btn-block" type="button"> Confirm </button> </form> </div> <!-- card-body.// --> </article> <!-- card.// --> </aside> <!-- col.// --> <aside class="col-sm-6"> <p>Paymetn form2</p> <article class="card"> <div class="card-body p-5"> <ul class="nav bg-light nav-pills rounded nav-fill mb-3" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#nav-tab-card"> <i class="fa fa-credit-card"></i> Credit Card</a></li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#nav-tab-paypal"> <i class="fab fa-paypal"></i> Paypal</a></li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#nav-tab-bank"> <i class="fa fa-university"></i> Bank Transfer</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="nav-tab-card"> <p class="alert alert-success">Some text success or error</p> <form role="form"> <div class="form-group"> <label for="username">Full name (on the card)</label> <input type="text" class="form-control" name="username" placeholder="" required=""> </div> <!-- form-group.// --> <div class="form-group"> <label for="cardNumber">Card number</label> <div class="input-group"> <input type="text" class="form-control" name="cardNumber" placeholder=""> <div class="input-group-append"> <span class="input-group-text text-muted"> <i class="fab fa-cc-visa"></i>   <i class="fab fa-cc-amex"></i>   <i class="fab fa-cc-mastercard"></i> </span> </div> </div> </div> <!-- form-group.// --> <div class="row"> <div class="col-sm-8"> <div class="form-group"> <label><span class="hidden-xs">Expiration</span> </label> <div class="input-group"> <input type="number" class="form-control" placeholder="MM" name=""> <input type="number" class="form-control" placeholder="YY" name=""> </div> </div> </div> <div class="col-sm-4"> <div class="form-group"> <label data-toggle="tooltip" title="" data-original-title="3 digits code on back side of the card">CVV <i class="fa fa-question-circle"></i></label> <input type="number" class="form-control" required=""> </div> <!-- form-group.// --> </div> </div> <!-- row.// --> <button class="subscribe btn btn-primary btn-block" type="button"> Confirm </button> </form> </div> <!-- tab-pane.// --> <div class="tab-pane fade" id="nav-tab-paypal"> <p>Paypal is easiest way to pay online</p> <p> <button type="button" class="btn btn-primary"> <i class="fab fa-paypal"></i> Log in my Paypal </button> </p> <p><strong>Note:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="tab-pane fade" id="nav-tab-bank"> <p>Bank accaunt details</p> <dl class="param"> <dt>BANK: </dt> <dd> THE WORLD BANK</dd> </dl> <dl class="param"> <dt>Accaunt number: </dt> <dd> 12345678912345</dd> </dl> <dl class="param"> <dt>IBAN: </dt> <dd> 123456789</dd> </dl> <p><strong>Note:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <!-- tab-pane.// --> </div> <!-- tab-content .// --> </div> <!-- card-body.// --> </article> <!-- card.// --> </aside> <!-- col.// --> </div> <!-- row.// --> </div> <!--container end.//--> <br><br> <article class="bg-secondary mb-3"> <div class="card-body text-center"> <h3 class="text-white mt-3">Bootstrap 4 UI KIT</h3> <p class="h5 text-white">Components and templates <br> for Ecommerce, marketplace, booking websites and product landing pages</p> <br> <p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com <i class="fa fa-window-restore "></i></a></p> </div> <br><br> </article>