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;
}
NiceSnippets.com
