In this snippets we are giving you demo of credit card payment form design usign bootstrap 4. this is fully responsive stripe payment form design. credit card payment form html code. master card payment form design in html. silver credit card payment form. in this form design we display card number,expiration date,csv code and coupon code.

We allows to free snippets of bootstrap payment form template , you can download full code of bootstrap stripe payment form layout. Here in this post i will give you example of responsive payment form snippet and you will get simple code of html, css and jquery. In credit card payment form html code snippet i give you three tab with html, css and js, you can easily get code of credit card payment form template html layout.


<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="custom.css"> </head> <body class="bg-danger pt-5"> <div class="container"> <div class="row"> <div class="col-md-4 offset-md-4 col-10 offset-1 pl-0 pr-0"> <div class="card"> <div class="card-header"> <div class="row"> <div class="col-md-5 col-12 pt-2"> <h6 class="m-0"><strong>Payment Details</strong></h6> </div> <div class="col-md-7 col-12 icons"> <i class="fa fa-cc-visa fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-mastercard fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-discover fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-amex fa-2x" aria-hidden="true"></i> </div> </div> </div> <div class="card-body"> <form> <div class="form-group"> <label for="validationTooltipCardNumber"><strong>CARD NUMBER</strong></label> <div class="input-group"> <input type="text" class="form-control border-right-0" id="validationTooltipCardNumber" placeholder="Card Number"> <div class="input-group-prepend"> <span class="input-group-text rounded-right" id="validationTooltipCardNumber"><i class="fa fa-credit-card"></i></span> </div> </div> </div> <div class="row"> <div class="col-md-8 col-12"> <div class="form-group"> <label for="exampleInputExpirationDate"><strong>EXPIRATION DATE</strong></label> <input type="text" class="form-control" id="exampleInputExpirationDate" placeholder="MM / YY"> </div> </div> <div class="col-md-4 col-12"> <div class="form-group"> <label for="exampleInputCvcCode"><strong>CVC CODE</strong></label> <input type="text" class="form-control" id="exampleInputCvcCode" placeholder="CVC"> </div> </div> </div> <div class="form-group"> <label for="exampleInputCouponCode"><strong>COUPON CODE</strong></label> <input type="text" class="form-control" id="exampleInputCouponCode" placeholder="Coupon Code"> </div> <button class="btn btn-info w-100 pb-2 pt-2">Start Subscription</button> </form> </div> </div> </div> </div> </div> </body> </html>
.card-header .icons .fa-cc-visa{ color: #FFB85F; } .card-header .icons .fa-cc-discover{ color: #027878; } .card-header .icons .fa-cc-amex{ color: #EB4960; } .card-body label{ font-size: 14px; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More
Bootstrap 4 div structure and how to use bootstrap 4 div class ?

Bootstrap 4 div structure and how to use bootstrap 4 div cla...

Here We explain how to work bootstrap 4 column structure. ".col-" class work...

Read More
Bootstrap 4 new button style

Bootstrap 4 new button style

Here we create small example for bootstrap 4 new button style. you can simply us...

Read More

Random Post