Bootstrap 4 Checkout Form

This article will explain how to create a Bootstrap 4 checkout form in detail with various examples. A bootstrap 4 checkout page is the page related to the payment, shipping, and billing details of a customer.

Following are the various examples of the Bootstrap 4 checkout form.

Example 1:

  <! DOCTYPE html>  <html>  <head>  <title> Bootstrap 4 Checkout Form Example  </title>  <link rel = “stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css”>  <meta name = “viewport” content = “width=device-width, initial-scale=1, shrink-to-fit=no”>   </head>  <style>  body {     text-align: center;    padding: 20px;  background-color: #F8F9FA;  background-size: 1800% 1800%;  font-family: “Lucida Console”, “Courier New”, monospace;  -webkit-animation: rainbow 18s ease infinite;  -z-animation: rainbow 18s ease infinite;  -o-animation: rainbow 18s ease infinite;    animation: rainbow 18s ease infinite; }  </style>  <body>  <div class = “col-md-4 container bg-default”>  <h4 class = “my-4”>  Example : Bootstrap 4 Checkout Page   </h4>  <form>  <div class = “form-row”>  <div class = “col-md-6 form-group”>  <label for = “firstname”> First Name </label>  <input type = “text” class = “form-control” id = “firstname” placeholder = “First Name”>  <div class = “invalid-feedback”>  Valid first name is required.  </div>  </div> <div class = “col-md-6 form-group”>  <label for = “lastname”> Last Name </label>             <input type = “text” class = “form-control” id = “lastname” placeholder = “Last Name”>  <div class = “invalid-feedback”>  Valid last name is required.  </div>  </div>  </div>  <div class = “form-group”>  <label for = “email”> Email </label>  <input type = “email” class = “form-control” id = “email” placeholder = “you@example.com” required>  </div> <div class=”form-group”>  <label for = “adress”>Address </label>  <input type = “text” class = “form-control” id = “adress” placeholder = “1234 Main Street” required>  <div class = “invalid-feedback”>  Please enter your shipping address.  </div>  </div>  <div class = “row”>  <div class = “col-md-4 form-group”>  <label for = “country”> Country </label>  <select type = “text” class = “form-control” id = “country”>  <option value> Choose… </option>  <option> United Kingdom </option>  </select>  <div class = “invalid-feedback”>  Please select a valid country.  </div>  </div>  <div class = “col-md-4 form-group”>  <label for = “city”> City </label>  <select type = “text” class = “form-control” id = “city”>  <option value> Choose… </option>  <option> London </option>  </select>  <div class = “invalid-feedback”>  Please provide a valid city.  </div>  </div>  <div class = “col-md-4 form-group”>  <label for = “postcode”> Postcode </label>  <select type = “text” class = “form-control” id = “postcode”>  <option value> Choose… </option>  <option> NW6 2LS </option>  </select>  <div class = “invalid-feedback”>  Postcode required.  </div>  </div>  </div>  <hr>    <h4 class = “mb-4”> Payment </h4>  <div class = “form-check”>  <input type = “radio” class = “form-check-input” id = “credit” name = “payment-method” checked required>  <label for = “credit” class = “form-check-label”> Credit Card </label>  </div>  <div class = “form-check”>  <input type = “radio” class = “form-check-input” id = “debit” name = “payment-method” required>  <label for = “debit” class = “form-check-label”> Debit Card </label>  </div>  <div class = “form-check”>  <input type = “radio” class = “form-check-input” id = “paypal” name = “payment-method” required>  <label for = “paypal” class = “form-check-label”> PayPal </label>  </div>  <div class = “row mt-4”>  <div class = “col-md-6 form-group”>  <label for = “card-name”> Name on card </label>  <input type = “text” class = “form-control” id = “card-name” placeholder required>  <div class = “invalid-feedback”>  Name on card is required  </div>  </div>  <div class = “col-md-6 form-group”>  <label for = “card-no”> Card Number </label>  <input type = “text” class = “form-control” id = “card-no” placeholder required>  <div class = “invalid-feedback”>  Credit card number is required  </div>  </div>  </div>  <div class = “form-row”>  <div class = “col-md-5 form-group”>  <label for = “expiration”> Expire Date </label>  <input type = “text” class = “form-control” id = “card-name” placeholder required>  <div class = “invalid-feedback”>  Expiration date required  </div>  </div>  <div class = “col-md-5 form-group”>  <label for = “ccv-no”> Security Number </label>  <input type = “text” class = “form-control” id = “sec-no” placeholder required>  <div class = “invalid-feedback”>  Security code required  </div>  </div>  </div>  <hr class = “mb-4”>  <button class = “btn btn-primary bt-lg btn-block” type = “submit”> Continue to Checkout </button>  </form>  </div>  </body>  </html>  

Explanation:

In the above example, we have created an example of how to create bootstrap 4 checkout page.

Output:

Following is the output of this example.

Bootstrap 4 Checkout Form

Example 2:
<! DOCTYPE html> <html> <head> <title> Bootstrap 4 Checkout Form Example </title> <link rel = “stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css”> <meta name = “viewport” content = “width=device-width, initial-scale=1, shrink-to-fit=no”> <link rel = “stylesheet” href=”https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Raleway:300,400,600⊂=latin-ext”> <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css”> <link rel = “stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”> <script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js <script src = “https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js”> </script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js”> </script> <script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”> </script> </head> <style> html, body { height: 100%; color: black; font-family: ‘Open Sans’, sans-serif; font-weight: 400; } body { font-size: 62.5%; } body { background: url(https://images.unsplash.com/photo-1462899006636-339e08d1844e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) no-repeat center center fixed; background-size: cover; } .main-wrapper { border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; border: none; -webkit-box-shadow: 0px 20px 10px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0px 20px 10px 10px rgba(0,0,0,0.1); box-shadow: 0px 20px 10px 10px rgba(0,0,0,0.1); } .basket-header { border-radius: 15px 0 0 0; -moz-border-radius: 15px 0 0 0; -webkit-border-radius: 15px 0 0 0; padding-left: 25px !important; } .creditcard-header { border-radius: 0 15px 0 0; -moz-border-radius: 0 15px 0 0; -webkit-border-radius: 0 15px 0 0; padding-left: 35px !important; } .panel-header { background: #166D9A; height: 80px; padding: 15px 20px 0 20px; } .panel-wrapper .basket-header .column-titles { color: #A2C6DD; padding: 0; margin: 0; display: none; visibility: hidden; } .fix-overflow { padding-right: 5px !important; } .panel-wrapper .basket-body { overflow-x: hidden; overflow-y: auto; } .panel-wrapper .creditcard-body { padding: 30px 40px 0 40px; } .panel-wrapper .panel-body { font-weight: 400; font-size: 1.2em; outline: none !important; min-height: 350px; max-height: 350px; } .basket-body { background: #F9F9F9; } .creditcard-body { background: white; } .basket-body .row.product { margin: 5px 0 5px 0; padding: 5px 0 5px 0; border-bottom: solid 1px #eeeeee; } .basket-body .row.product div { color: #777879; padding: 0 10px 0 10px; } .product-image img { -o-object-fit: contain; object-fit: contain; width: 100%; min-width: 100%; max-width: 100%; max-height: 80px; } .card-wrapper { height: 100%; } .padding-top-10 { padding-top: 10px !important; } .padding-top-20 { padding-top: 20px !important; } .padding-horizontal-40 { padding: 0 40px 0 40px; } .align-right { text-align: right; } .align-center { text-align: center; } .emphasized { font-family: ‘Open Sans’, sans-serif; font-weight: 600; font-size: 1.6em; color: white; } .description { font-family: ‘Open Sans’, sans-serif; font-weight: 400; font-size: 1.2em; color: #A2C6DD; } .panel-footer { padding-top: 10px; height: 150px; } .basket-footer { background: #166D9A; border-radius: 0 0 0 15px; -moz-border-radius: 0 0 0 15px; -webkit-border-radius: 0 0 0 15px; } .creditcard-footer { background: white; border-radius: 0 0 15px 0; -moz-border-radius: 0 0 15px 0; -webkit-border-radius: 0 0 15px 0; padding: 75px 30px 0 30px; } .panel-footer hr { margin: 3px 0 3px 0; display: block; height: 1px; border: 0; border-top: 1px solid #197fb3; padding: 0; } .panel-footer button { border: solid 1px #166D9A; background: #166D9A; font-family: ‘Open Sans’, sans-serif; font-weight: 600; color: white; font-size: 1.3em; text-transform: uppercase; padding: 10px 15px 11px 15px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .panel-footer button:hover { cursor: pointer; } button.cancel:after { content: ”; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } button { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 150ms linear; text-align: center; white-space: nowrap; text-decoration: none !important; text-transform: none; text-transform: capitalize; color: #fff; border: 0 none; border-radius: var(–borderRadius); font-size: 13px; font-weight: 500; line-height: 1.3; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: 2px 5px 10px var(–color-smoke); } button.cancel:before { font-family: ‘icomoon’; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; } button.cancel { background: white; color: #166D9A; } button.cancel:hover { background: #ff0000; border-color: #ff0000; color: white; } button.confirm:hover { background: #00b300; border-color: #00b300; color: white; } .dive { margin-top: 5px; } .sub { font-size: 75%; color: #aaaaaa; } .very { font-size: 2.2em; } .creditcard-body form { font-size: 1.3em; } .creditcard-body form i.fa { margin-right: 10px; color: #166D9A; } .creditcard-body form fieldset { border-bottom: dotted 2px #D0D0D0; margin-bottom: 25px; } .creditcard-body form input { border: none; font-weight: 600; color: #555555; width: 85%; outline: none; } .creditcard-body form input::placeholder { color: #D0D0D0; } .creditcard-body form label { color: #aaaaaa; } .additional { font-weight: 300; font-size: 80%; } .fa-info-circle { color: #aaaaaa !important; } span.month.focused.active { background: #166D9A !important; background-image: none !important; } @media (max-width: 992px) { } @media (max-width: 767px) { .basket-header { border-radius: 15px 15px 0 0; -moz-border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; } .basket-footer { background: #166D9A; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .creditcard-header { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } .creditcard-footer { border-radius: 0 0 15px 15px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0 0 15px 15px; } } </style> <body> <div class = “container-fluid background”> <div class = “row padding-top-20”> <div class = “col-12 col-sm-12 col-md-10 col-lg-10 col-xl-8 offset-md-1 offset-lg-1 offset-xl-2 padding-horizontal-40”> <div class = “row”> <div class = “col-12 main-wrapper”> <div class = “row”> <div class = “col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6”> <div class = “row panel-wrapper”> <div class = “col-12 panel-header creditcard-header”> <div class = “row”> <div class = “col-12 creditcard-title”> <span class = “description”> <b> Example </b> </span> <br> <span class = “emphasized”> Bootstrap 4 Checkout Page </span> </div> </div> </div> <div class = “col-12 panel-body creditcard-body”> <form action = “#” method = “post” target = “_self”> <fieldset> <label for = “card-name”> Name on the Card </label> <br> <i class = “fa fa-user-o” aria-hidden = “true”> </i> <input type = ‘text’ id = ‘card-name’ name = ‘card-name’ placeholder = ‘Enter name on the Card’ title = ‘Name on the Card’> </fieldset> <fieldset> <label for = “card-number”> Card Number </label> <br> <i class = “fa fa-credit-card” aria-hidden = “true”> </i> <input type = ‘text’ id = ‘card-number’ name = ‘card-number’ placeholder = ‘1234 5678 9123 4567’ title = ‘Card Number’> </fieldset> <fieldset> <label for = “card-expiration”> Expiration Date </label> <br> <i class = “fa fa-calendar” aria-hidden = “true”> </i> <input type = ‘text’ id = ‘card-expiration’ name = ‘card-expiration’ placeholder =’YY/MM’ title = ‘Expiration’ class = “card-expiration”> </fieldset> <fieldset> <label for = “card-ccv”> CVC/CCV </label> <i class = “fa fa-info-circle” aria-hidden = “true” data-toggle = “tooltip” data-placement = “right” title = “The CVV Number on your credit card or debit card is a 3 digit number on VISA, MasterCard”> </i> <br> <i class = “fa fa-lock” aria-hidden = “true”> </i> <input type = ‘text’ id = ‘card-ccv’ name = ‘card-ccv’ placeholder = ‘123’ title = ‘CVC/CCV’> </fieldset> </form> </div> <div class = “col-12 panel-footer creditcard-footer”> <div class = “row”> <div class = “col-12 align-right”> <button class = “cancel”> Cancel </button> <button class = “confirm”> Confirm & Pay </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script> $( document ).ready ( function () { console.log ( ‘ready!’ ); $(‘[data-toggle=”tooltip”]’).tooltip(); var template = $( ‘#template’ ).html (); Mustache.parse ( template ); var rendered = Mustache.render ( template, get_basket () ); $( ‘#template’ ).html ( rendered ); if ( $(‘.basket-body’).hasScrollBar () ) { $(‘.column-titles’).addClass(‘fix-overflow’); $(‘.basket-body’).niceScroll({autohidemode: false,cursorcolor:”#ffffff”,cursorborder:”1px solid #D0D0D0″,cursorborderradius: “0”,background: “#ffffff”}); } else { $(‘.column-titles’).removeClass(‘fix-overflow’); } $(‘.card-expiration’).datepicker({ format: “mm/yyyy”, startView: “months”, minViewMode: “months” }); }); </script> </body> </html>

Explanation:

In the above example, we have created an example of creating a bootstrap 4 checkout page.

Output:

Following is the output of this example.

Bootstrap 4 Checkout Form

Example 3:

  <! DOCTYPE html>  <html>  <head>  <title> Bootstrap 4 Checkout Form Example  </title>  <link rel = “stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css”>  <meta name = “viewport” content = “width=device-width, initial-scale=1, shrink-to-fit=no”>   <link rel = “stylesheet” href=”https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Raleway:300,400,600⊂=latin-ext”>  <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css”>  <link rel = “stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js”> </script>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js  <script src = “https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js”> </script>  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js”> </script>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”> </script>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js”> </script>  <script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”> </script>  </head>  <style>  *,  *:after,  *:before {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  }    .clearfix:before,  .clearfix:after {  content: ” “;  display: table;  }    .clearfix:after {  clear: both;  }    body {  font-family: sans-serif;  background: #f6f9fa;  }    h1 {  color: #ccc;  text-align: center;  }  h4.payment-title {      text-align: left;      padding: 10px 0px 30px 30px;      font-weight: 500;      color: #5e6977;  }  a {    color: #ccc;    text-decoration: none;    outline: none;  }    .tab_container {      width: 550px;      margin: 50px auto;      position: relative;      border: 1px solid #eee;      border-radius: 7px;    background:#fff;  }    input, section {    clear: both;    padding-top: 10px;    display: none;  }    label {    font-weight: 700;    font-size: 14px;    display: block;    float: left;    padding: 20px 14px;    color: #ccc;    cursor: pointer;    text-decoration: none;    text-align: center;    background: #fff;    margin-bottom: 2px;        border-top-left-radius: 7px;      border-top-right-radius: 7px;    border-bottom:2px solid #eee;    }    label:hover {  background-color:#eee;    border-radius:0px;  }    .row-payment-method {    margin: 0px 0px 0px 0px;    padding: 22px 0px 11px 0px;    text-align: left;    display: table;  }  .payment-row {    background-color: #f5f6fa;    padding-left: 30px;    padding-right: 30px;        width: 100%;  }  .payment-row-last {    margin-left: 30px;    margin-right: 30px;    width: 100%;  }    .payment-padding-right {      }  .select-icon {    display: table-cell;    vertical-align: top;    text-align: left;    padding-left: 0px;    padding-top: 0px;    padding-right: 0px;    padding-bottom: 0px;    width: 24px;    height: 24px;  }    .select-txt {    display: table-cell;    vertical-align: middle;    word-wrap: break-word;    height: 60px;    text-align: left;    padding-left: 15px;    font-size: 12pt;  }  .select-logo {    padding-right: 0px;    vertical-align: top;        right: 35px;      position: absolute;  }  .select-logo-sub {    display: table-cell;    vertical-align: middle;  }  .logo-spacer {    padding-right: 13px;  }  .pymt-type-name {    font-weight: 500;    font-size: 12pt;    padding-bottom: 8px;    color: #5a6977;  }  .pymt-type-desc {    padding-bottom: 22px;    width:70%;      font-size:14px;  }    .form-cc {    display: table;    width: 100%;    text-align: left;    padding: 0px 0px 30px 30px;  }  .row-cc {    display: table;    width: 100%;    padding-bottom: 7px;  }  .cc-txt {    border-color: #e1e8ee;    width: 100%;  }  .input {    border-radius: 5px;    border-style: solid;    border-width: 2px;    height: 38px;    padding-left: 15px;    font-weight: 600;    font-size: 11pt;    color: #5e6977;     }  input[type=”text”] {     display: initial;    padding:15px  }  .text-validated {    border-color: #7DC855;    background-image: url(“https://www.dropbox.com/s/1mve74fafiwsae1/icon-tick.png?raw=1″);    background-repeat: no-repeat;    background-position: right 18px center;  }  .cc-ddl {    border-color: #f0f4f7;    background-color: #f0f4f7;        width: 100px;      margin-right: 10px;  }  .cc-title {    font-size: 10.5pt;    padding-bottom: 8px;  }  .cc-field {    padding-top: 15px;    padding-right: 30px;    display: table-cell;  }  .button-master-container {    display: table;    width: 100%;    border-top: 1px solid #e1e8ee;    height: 60px;    vertical-align: bottom;  }  .button-master-container:hover {    display: table;    width: 100%;    border-top: 1px solid #e1e8ee;    height: 60px;    vertical-align: bottom;  }  .button-container {    width: 50%;    display: table-cell;    text-align: center;    vertical-align: middle;  }  a, a:hover {    color: inherit;    text-decoration: inherit;  }  .cvv-tooltip-img {    display: inline-block;    vertical-align: middle;    padding-left: 17px;  }  input[id^=”radio”] {     display:none;  }  input[id^=”radio”] + label  {      background-image:url(“https://www.dropbox.com/s/mnwbybfl4pnzoi4/radio-inactive.png?raw=1″);      height: 26px;      width: 24px;      display:inline-block;      padding: 0 0 0 0px;      cursor:pointer;      border-radius: 50%;  }  input[id^=”radio”]:checked + label  {      background-image:url(“https://www.dropbox.com/s/8634yi8i1s7fx7w/radio-active.png?raw=1”);    height: 26px;      width: 24px;      display:inline-block;      padding: 0 0 0 0px;      cursor:pointer;  }  p.credit {    text-align:center;    color: #ccc;  }  h1 {      position: relative;      padding: 0;      margin: 0;      font-family: “Raleway”, sans-serif;      font-weight: 200;      font-size: 40px;      color: red;      -webkit-transition: all 0.4s ease 0s;      -o-transition: all 0.4s ease 0s;      transition: all 0.4s ease 0s;    }    </style>  <body>  <h1> Example </h1>  <h1> Bootstrap 4 Checkout Page </h1>  <div class = “tab_container”>        <form action = “” method = “post”>        <div class = “pymt-radio”>             </div>        <div class = “pymt-radio”>          <div class = “row-payment-method payment-row-last”>        <div class = “select-icon hr”>          <input type = “radio” id = “radio2” name = “radios” value = “pp” checked>          <label for = “radio2”> </label>        </div>        <div class = “select-txt hr”>          <p class = “pymt-type-name”> Credit Card </p>        </div>        <div class = “select-logo”>          <div class = “select-logo-sub logo-spacer”>            <img src = “https://www.dropbox.com/s/by52qpmkmcro92l/logo-visa.png?raw=1” alt = “Visa”/>          </div>          <div class = “select-logo-sub”>          <img src = “https://www.dropbox.com/s/6f5dorw54xomw7p/logo-mastercard.png?raw=1” alt = “MasterCard”/> </div>        </div>             </div>        </div>      <div class = “form-cc”>        <div class = “row-cc”>          <div class = “cc-field”>            <div class = “cc-title”> Credit Card Number            </div>            <input type = “text” class = “input cc-txt text-validated” value = “8542 9731 9192 2193” />          </div>        </div>        <div class = “row-cc”>          <div class = “cc-field”>            <div class = “cc-title”> Expiry Date            </div>            <select class = “input cc-ddl”>              <option selected> 01 </option>              <option> 02 </option>              <option> 03 </option>              <option> 04 </option>              <option> 05 </option>              <option> 06 </option>              <option> 07 </option>              <option> 08 </option>              <option> 09 </option>              <option> 10 </option>              <option> 11 </option>              <option> 12 </option>                      </select>            <select class = “input cc-ddl”>              <option> 01 </option>              <option> 02 </option>              <option> 03 </option>              <option> 04 </option>              <option> 05 </option>              <option> 06 </option>              <option> 07 </option>              <option> 08 </option>              <option> 09 </option>              <option> 10 </option>              <option> 11 </option>              <option> 12 </option>              <option> 13 </option>              <option> 14 </option>              <option> 15 </option>              <option selected> 16 </option>              <option> 17 </option>              <option> 18 </option>              <option> 19 </option>              <option> 20 </option>              <option> 21 </option>              <option> 22 </option>              <option> 23 </option>              <option> 24 </option>              <option> 25 </option>              <option> 26 </option>              <option> 27 </option>              <option> 28 </option>              <option> 29 </option>              <option> 30 </option>              <option> 31 </option>                        </select>          </div>          <div class = “cc-field”>            <div class = “cc-title”> CVV Code <span class = “numberCircle”> ? </span>            </div>            <input type = “text” class = “input cc-txt”/>          </div>        </div>        <div class = “row-cc”>          <div class = “cc-field”>            <div class = “cc-title”> Name on Card            </div>            <input type = “text” class = “input cc-txt”/>          </div>        </div>                      </div>      </form>  </section>  </div>  <script>  $( document ).ready ( function ()  {      $(‘[data-toggle=”tooltip”]’).tooltip();      var template = $( ‘#template’ ).html ();      Mustache.parse ( template );      var rendered = Mustache.render ( template, get_basket () );      $( ‘#template’ ).html ( rendered );      if ( $(‘.basket-body’).hasScrollBar () )      {          $(‘.column-titles’).addClass(‘fix-overflow’);          $(‘.basket-body’).niceScroll({autohidemode: false,cursorcolor:”#ffffff”,cursorborder:”1px solid #D0D0D0″,cursorborderradius: “0”,background: “#ffffff”});      }      else      {          $(‘.column-titles’).removeClass(‘fix-overflow’);      }      $(‘.card-expiration’).datepicker({      format: “mm/yyyy”,      startView: “months”,       minViewMode: “months”          });  });  </script>  </body>  </html>  

Explanation:

In the above example, we have created an example of creating a bootstrap 4 checkout page.

Output:

Following is the output of this example.

Bootstrap 4 Checkout Form

Next Topic#

bootstrap 4 bootstrap 4 Buttons bootstrap 4 Dropdown bootstrap 4 Forms bootstrap 4 Images bootstrap 4 Jumbotron bootstrap 4 Layout bootstrap 4 Lists bootstrap 4 MCQ bootstrap 4 Navs bootstrap 4 Progress Bars bootstrap 4 Spinners bootstrap 4 Tables bootstrap 4 Tooltip bootstrap 4 tutorial what is bootstrap4

Bootstrap 4 Checkout Form

Bootstrap 4 Checkout Form

Example 1:

Example 3:

AutoCAD 2019 Free Download

Bootstrap 4 Figure class

You may also like