0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/site/content/docs/4.3/examples/checkout/index.html

226 lines
8.9 KiB
HTML
Raw Normal View History

---
layout: examples
title: Checkout example
extra_css:
- "form-validation.css"
extra_js:
- src: "form-validation.js"
body_class: "bg-light"
---
<div class="container">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstraps form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge bg-secondary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
</div>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
<div class="mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback" style="width: 100%;">
Your username is required.
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
</div>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
<div class="mb-3">
<label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">Payment</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
2018-01-15 01:06:52 +01:00
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">&copy; 2017-{{< year >}} Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
</div>