Creating Credit Card Form Using Bootstrap

over 7 years ago

0
0
Positive Vote
0
Negative Vote
0
Save Favourite
0
0
1
0
1.38k

Comment on it

Hello readers, Today in my blog I have tried to create credit card form using Bootstrap.

In the HTML, I need to create an outer div with the class name as credit card div and had 2 nested div inside it.

With the help of Bootstrap framework classes, I have tried to create it.

Below is the HTML code for it :-

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>Credit Card Form</title>


<!-- Fonts css file -->

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,600italic' rel='stylesheet' type='text/css'>



<!-- =Include bootstrap CSS File=-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />



<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />



<link href="css/style.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>





<div class="container">

<div class="row">

<div class="col-md-12 text-center">

<h2>Bootstrap Credit Card Form </h2>

</div>

</div>

<div class="row">

<div class="col-md-4 col-md-offset-4">

<div class="credit-card-div">

<div class="panel panel-default">

<div class="panel-heading">



<div class="row">

<div class="col-md-12 col-sm-12 col-xs-12">

<h5 class="text-muted"> Credit Card Number</h5>

<!-- <form id="creditCardForm" class="form-horizontal">

<div class="form-group">

<label class="col-xs-6 control-label">Credit card number</label>

<div class="col-xs-6">

<input type="text" class="form-control" name="cc" />

</div>

</div>

</form> -->



</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<input type="text" class="form-control" placeholder="0000" />

</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<input type="text" class="form-control" placeholder="0000" />

</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<input type="text" class="form-control" placeholder="0000" />

</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<input type="text" class="form-control" placeholder="0000" />

</div>

</div>

<div class="row ">

<div class="col-md-3 col-sm-3 col-xs-3">

<span class="help-block text-muted small-font"> Expiry Month</span>

<input type="text" class="form-control" placeholder="MM" />

</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<span class="help-block text-muted small-font"> Expiry Year</span>

<input type="text" class="form-control" placeholder="YY" />

</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<span class="help-block text-muted small-font"> CCV</span>

<input type="text" class="form-control" placeholder="CCV" />

</div>

<div class="col-md-3 col-sm-3 col-xs-3">

<img src="data:image/png;base64,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" class="img-rounded" />

</div>

</div>

<div class="row ">

<div class="col-md-12 pad-adjust">



<input type="text" class="form-control" placeholder="Name On The Card" />

</div>

</div>

<div class="row">

<div class="col-md-12 pad-adjust">

<div class="checkbox">

<label>

<input type="checkbox" checked class="text-muted"> Save details for fast payments. <a href="#">Learn More</a>

</label>

</div>

</div>

</div>

<div class="row ">

<div class="col-md-6 col-sm-6 col-xs-6 pad-adjust">

<input type="submit" class="btn btn-danger" value="CANCEL" />

</div>

<div class="col-md-6 col-sm-6 col-xs-6 pad-adjust">

<input type="submit" class="btn btn-warning btn-block" value="PAY NOW" />

</div>

</div>



</div>

</div>

</div>

<!-- CREDIT CARD DIV END -->

</div>

</div>

</div>

</body>

</html>

Below is the CSS code :-

.credit-card-div  span {
    padding-top:10px;
        }
.credit-card-div img {
    padding-top:30px;
}
.credit-card-div .small-font {
    font-size:9px;
}
.credit-card-div .pad-adjust {
    padding-top:10px;
}
.control-label{
    color: #777;
}

In the CSS by specifying the appropriate padding and color to the outer div i.e the credit card div I was able to create it.

Conclusion :-

With the help of above code we can easily create credit card form using Bootstrap.

Creating Credit Card Form Using Bootstrap

credit card form.zip

Creating Credit Card Form Using Bootstrap

Conclusion :-

0 Comment(s)

Comment on it

Unable to start Java!! Mr. Nerd figure out why..

Positive Votes

Negative Votes

Delete Comment

Post Projects

Manage Company