Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"checkout"
Bootstrap 3.0.0 Snippet by
prabuanan
3.0.0
jQuery
checkout
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
16.4K
 
2 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="wizard-inner"> <!-- <div class="connecting-line"></div> --> <ul class="nav breadcrumb_checkout" role="tablist"> <li role="presentation" class="active"> <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"> <h3>Shipping</h3> </a> </li> <li role="presentation" class=""> <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> <h3>Payment</h3> </a> </li> <li role="presentation" class="disabled"> <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> <h3>Confirmations</h3> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="step1"> <div class="step1"> <!-- exiting customer end --> <div class="row" style=""> <div class="checkout_details"> <div class="col-sm-6 col-sm-offset-3"> <dl class="dl-horizontal"> <dt>First Name:<span></span></dt> <dd>Priya</dd> </dl> <dl class="dl-horizontal"> <dt>Mobile Number:<span></span></dt> <dd>970000000</dd> </dl> <dl class="dl-horizontal"> <dt>Pincode:<span></span></dt> <dd>625014</dd> </dl> <dl class="dl-horizontal"> <dt>Email:<span></span></dt> <dd>user@gmail.com</dd> </dl> <dl class="dl-horizontal"> <dt>Flat / House No. / Floor / Building:<span></span></dt> <dd>#33/5</dd> </dl> <dl class="dl-horizontal"> <dt>Colony / Street / Locality:<span></span></dt> <dd>Roja 1st Street</dd> </dl> <dl class="dl-horizontal"> <dt>Landmark:<span></span></dt> <dd>Murugan Temple</dd> </dl> <div> <a class="btn btn-primary next-step btn-theme" data-toggle="modal" data-target="#myModal">Edit</a> </div> </div> </div> </div> <!-- exiting customer end--> <!-- new customer start --> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">First Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="First Name"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Mobile Number</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">Pincode</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Pincode"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Email address</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">Email address</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Flat / House No. / Floor / Building</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Flat"> </div> </div> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">Colony / Street / Locality</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Colony"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Landmark</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Colony"> </div> </div> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">Landmark</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Colony"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Email address</label> <textarea rows="4" cols="50" class="form-control"></textarea> </div> </div> <!-- new customer end --> </div><!-- step 1 end div tag --> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary next-step btn-theme">Next</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step2"> <!-- step 2 start --> <div class="step2"> <div class="col-sm-4"> <label class="radio-inline"><input type="radio" name="optradio">Credit card</label> <div class="credit_card"> <ul class="payments_ul"> <li> <img src="http://localhost/nukkad-shop/public/assets/img/credit-card.png"> </li> <li> <img src="http://localhost/nukkad-shop/public/assets/img/mastercard.png"> </li> <li> <img src="http://localhost/nukkad-shop/public/assets/img/paypal.png"> </li> <li> <img src="http://localhost/nukkad-shop/public/assets/img/visa.png"> </li> </ul> </div> <div class="name_of_card"> <div class="form-group"> <label for="exampleInputEmail1">Name on card</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Name on card"> </div> </div> <div class="name_of_card"> <div class="form-group"> <label for="exampleInputEmail1">Card number</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Card number"> </div> </div> <p>Expiration date</p> <div class="expir_date col-sm-3 p_rm"> <div class="form-group"> <select class="form-control"> <option>-- Select -- </option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> <div class="expir_date col-sm-5 p_rm"> <div class="form-group"> <select class="form-control"> <option>-- Year -- </option> <option>2006</option> <option>2006</option> <option>2007</option> <option>2008</option> </select> </div> </div> </div> <div class="col-sm-4"> <label class="radio-inline"><input type="radio" name="optradio">Debit card</label> <div class="debit_card"> <div class="form-group"> <select class="form-control"> <option>-- Debit card -- </option> <option>All Visa/MasterCard Debit Card</option> <option>All Rupay Debit Cards</option> <option>All SBI Maestro Debit Cards</option> </select> </div> </div> </div> <div class="col-sm-4"> <label class="radio-inline"><input type="radio" name="optradio">Net Banking</label> <div class="net_banking"> <div class="form-group"> <select class="form-control"> <option>-- Net Banking -- </option> <option>Allahabad Bank</option> <option>Andhra Bank</option> <option>Airtel Payments Bank</option> </select> </div> </div> </div> </div> <div class="clearfix"></div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step btn-theme">Previous</button></li> <li><button type="button" class="btn btn-primary next-step btn-theme">Next</button></li> </ul> </div><!-- step 2 end --> <div class="tab-pane" role="tabpanel" id="step3"> <div class="col-sm-4"> <h5><strong>Shipping address</strong></h5> <p>Name: John Albert</p> <p>Address: #33, Kaveri nadhi st, </p> <p>KK nagar, </p> <p> Madurai - 02</p> </div> <div class="col-sm-3"> <h5><strong>Payment method </strong></h5> <p>Net Banking: Allahabad Bank </p> </div> <div class="col-sm-5"> <h5><strong>Place your order and pay</strong></h5> <table class="table"> <thead> <tr> <th>Product</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Sunflower oli</td> <td><i class="fa fa-usd" aria-hidden="true"></i> 45</td> </tr> <tr> <td>Sun rich oil</td> <td><i class="fa fa-usd" aria-hidden="true"></i> 90</td> </tr> <tr> <td> Total: <i class="fa fa-usd" aria-hidden="true"> 135 </i></td> </tr> </tbody> </table> </div> <div class="clearfix"></div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step btn-theme">Previous</button></li> <li><button type="button" class="btn btn-default next-step btn-theme">Skip</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step btn-theme">Next</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="complete"> <div class="step44"> <h5>Completed</h5> </div> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div>
.wizard .nav-tabs > li.active > a::after, .wizard .nav-tabs > li:hover > a::after { transform: scale(1); } .tab-nav > li > a::after { background: ##5a4080 none repeat scroll 0% 0%; color: #fff; } .tab-pane { padding: 0px 0; } .wizard .nav-tabs > li {width:5%; text-align:center;} /* check out */ .breadcrumb_checkout { list-style: none; overflow: hidden; margin: 40px; padding: 0; } .breadcrumb_checkout li { float: left; } .breadcrumb_checkout li a { color: white; text-decoration: none; padding: 8px 0 8px 55px; background: brown; /* fallback color */ background-color: #60ab59; position: relative; display: block; float: left; } @media (min-width: 768px) { .breadcrumb_checkout li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid #60ab5973; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb_checkout li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left:0px; left: 100%; z-index: 1; } .breadcrumb_checkout li.active a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid #60ab59; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } } .breadcrumb_checkout li:first-child a { padding-left: 10px; } .breadcrumb_checkout li.active { background: #60ab59; color: #fff; } .breadcrumb_checkout li a { background: #60ab5973; color: #fff; } .breadcrumb_checkout li a:hover { background: #60ab5973; color: #fff; } .breadcrumb_checkout li a:visited { background: #60ab5973; color: #fff; } .breadcrumb_checkout li a:focus { background: #60ab5973; color: #fff; } .breadcrumb_checkout>li.disabled>a:hover { background: #60ab5973; color: #fff; } .breadcrumb_checkout>li.disabled>a:visited { background: #60ab5973; color: #fff; } .breadcrumb_checkout>li.disabled>a:focus { background: #60ab5973; color: #fff; }
$(document).ready(function () { //Initialize tooltips // $('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .breadcrumb_checkout li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .breadcrumb_checkout li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); }
Related:
See More
Free Template
Material Kit React
37.9K
25
Bootstrap Checkout Form
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76