Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating Credit Card Form Using Bootstrap

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 462
    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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: