Shopping carts
Bootstrap 5 Shopping Carts component
Responsive Shopping Cart & checkout templates built with Bootstrap 5. Multiple examples of various product summary & payment review designs. Ready to use pages and templates.Basic shopping cart template
A basic shopping card template with purchased products listing using product cards, payment form with credit card inputs fields and an avatar in the upper right corner - indicating that the user is already logged into his profile.
<section class="h-100 h-custom" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card">
<div class="card-body p-4">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-3"><a href="#!" class="text-body"><i
class="fas fa-long-arrow-alt-left me-2"></i>Continue shopping</a></h5>
<hr>
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<p class="mb-1">Shopping cart</p>
<p class="mb-0">You have 4 items in your cart</p>
</div>
<div>
<p class="mb-0"><span class="text-muted">Sort by:</span> <a href="#!"
class="text-body">price <i class="fas fa-angle-down mt-1"></i></a></p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
</div>
<div class="ms-3">
<h5>Iphone 11 pro</h5>
<p class="small mb-0">256GB, Navy Blue</p>
</div>
</div>
<div class="d-flex flex-row align-items-center">
<div style="width: 50px;">
<h5 class="fw-normal mb-0">2</h5>
</div>
<div style="width: 80px;">
<h5 class="mb-0">$900</h5>
</div>
<a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img2.webp"
class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
</div>
<div class="ms-3">
<h5>Samsung galaxy Note 10 </h5>
<p class="small mb-0">256GB, Navy Blue</p>
</div>
</div>
<div class="d-flex flex-row align-items-center">
<div style="width: 50px;">
<h5 class="fw-normal mb-0">2</h5>
</div>
<div style="width: 80px;">
<h5 class="mb-0">$900</h5>
</div>
<a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img3.webp"
class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
</div>
<div class="ms-3">
<h5>Canon EOS M50</h5>
<p class="small mb-0">Onyx Black</p>
</div>
</div>
<div class="d-flex flex-row align-items-center">
<div style="width: 50px;">
<h5 class="fw-normal mb-0">1</h5>
</div>
<div style="width: 80px;">
<h5 class="mb-0">$1199</h5>
</div>
<a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
<div class="card mb-3 mb-lg-0">
<div class="card-body">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img4.webp"
class="img-fluid rounded-3" alt="Shopping item" style="width: 65px;">
</div>
<div class="ms-3">
<h5>MacBook Pro</h5>
<p class="small mb-0">1TB, Graphite</p>
</div>
</div>
<div class="d-flex flex-row align-items-center">
<div style="width: 50px;">
<h5 class="fw-normal mb-0">1</h5>
</div>
<div style="width: 80px;">
<h5 class="mb-0">$1799</h5>
</div>
<a href="#!" style="color: #cecece;"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card bg-primary text-white rounded-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h5 class="mb-0">Card details</h5>
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
class="img-fluid rounded-3" style="width: 45px;" alt="Avatar">
</div>
<p class="small mb-2">Card type</p>
<a href="#!" type="submit" class="text-white"><i
class="fab fa-cc-mastercard fa-2x me-2"></i></a>
<a href="#!" type="submit" class="text-white"><i
class="fab fa-cc-visa fa-2x me-2"></i></a>
<a href="#!" type="submit" class="text-white"><i
class="fab fa-cc-amex fa-2x me-2"></i></a>
<a href="#!" type="submit" class="text-white"><i class="fab fa-cc-paypal fa-2x"></i></a>
<form class="mt-4">
<div data-mdb-input-init class="form-outline form-white mb-4">
<input type="text" id="typeName" class="form-control form-control-lg" siez="17"
placeholder="Cardholder's Name" />
<label class="form-label" for="typeName">Cardholder's Name</label>
</div>
<div data-mdb-input-init class="form-outline form-white mb-4">
<input type="text" id="typeText" class="form-control form-control-lg" siez="17"
placeholder="1234 5678 9012 3457" minlength="19" maxlength="19" />
<label class="form-label" for="typeText">Card Number</label>
</div>
<div class="row mb-4">
<div class="col-md-6">
<div data-mdb-input-init class="form-outline form-white">
<input type="text" id="typeExp" class="form-control form-control-lg"
placeholder="MM/YYYY" size="7" id="exp" minlength="7" maxlength="7" />
<label class="form-label" for="typeExp">Expiration</label>
</div>
</div>
<div class="col-md-6">
<div data-mdb-input-init class="form-outline form-white">
<input type="password" id="typeText" class="form-control form-control-lg"
placeholder="●●●" size="1" minlength="3" maxlength="3" />
<label class="form-label" for="typeText">Cvv</label>
</div>
</div>
</div>
</form>
<hr class="my-4">
<div class="d-flex justify-content-between">
<p class="mb-2">Subtotal</p>
<p class="mb-2">$4798.00</p>
</div>
<div class="d-flex justify-content-between">
<p class="mb-2">Shipping</p>
<p class="mb-2">$20.00</p>
</div>
<div class="d-flex justify-content-between mb-4">
<p class="mb-2">Total(Incl. taxes)</p>
<p class="mb-2">$4818.00</p>
</div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-block btn-lg">
<div class="d-flex justify-content-between">
<span>$4818.00</span>
<span>Checkout <i class="fas fa-long-arrow-alt-right ms-2"></i></span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
Shopping cart template with quantity edit
In the example below the user can change the quantity of purchased products using the numeric input. This template is equipped with a register button - for cases in which the user needs to go trough new account registration or log into an existing account before he completes the purchase. You can of course replace this with a "Next step" button leading straight to the payment step.
Shopping Cart
3 items
Summary
items 3
€ 132.00
Shipping
Give code
Total price
€ 137.00
<section class="h-100 h-custom" style="background-color: #d2c9ff;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12">
<div class="card card-registration card-registration-2" style="border-radius: 15px;">
<div class="card-body p-0">
<div class="row g-0">
<div class="col-lg-8">
<div class="p-5">
<div class="d-flex justify-content-between align-items-center mb-5">
<h1 class="fw-bold mb-0">Shopping Cart</h1>
<h6 class="mb-0 text-muted">3 items</h6>
</div>
<hr class="my-4">
<div class="row mb-4 d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img5.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<h6 class="text-muted">Shirt</h6>
<h6 class="mb-0">Cotton T-shirt</h6>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h6 class="mb-0">€ 44.00</h6>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
</div>
</div>
<hr class="my-4">
<div class="row mb-4 d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img6.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<h6 class="text-muted">Shirt</h6>
<h6 class="mb-0">Cotton T-shirt</h6>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h6 class="mb-0">€ 44.00</h6>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
</div>
</div>
<hr class="my-4">
<div class="row mb-4 d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img7.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<h6 class="text-muted">Shirt</h6>
<h6 class="mb-0">Cotton T-shirt</h6>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h6 class="mb-0">€ 44.00</h6>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
</div>
</div>
<hr class="my-4">
<div class="pt-5">
<h6 class="mb-0"><a href="#!" class="text-body"><i
class="fas fa-long-arrow-alt-left me-2"></i>Back to shop</a></h6>
</div>
</div>
</div>
<div class="col-lg-4 bg-body-tertiary">
<div class="p-5">
<h3 class="fw-bold mb-5 mt-2 pt-1">Summary</h3>
<hr class="my-4">
<div class="d-flex justify-content-between mb-4">
<h5 class="text-uppercase">items 3</h5>
<h5>€ 132.00</h5>
</div>
<h5 class="text-uppercase mb-3">Shipping</h5>
<div class="mb-4 pb-2">
<select data-mdb-select-init>
<option value="1">Standard-Delivery- €5.00</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<h5 class="text-uppercase mb-3">Give code</h5>
<div class="mb-5">
<div data-mdb-input-init class="form-outline">
<input type="text" id="form3Examplea2" class="form-control form-control-lg" />
<label class="form-label" for="form3Examplea2">Enter your code</label>
</div>
</div>
<hr class="my-4">
<div class="d-flex justify-content-between mb-5">
<h5 class="text-uppercase">Total price</h5>
<h5>€ 137.00</h5>
</div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-dark btn-block btn-lg"
data-mdb-ripple-color="dark">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
.card-registration .select-input.form-control[readonly]:not([disabled]) {
font-size: 1rem;
line-height: 2.15;
padding-left: .75em;
padding-right: .75em;
}
.card-registration .select-arrow {
top: 13px;
}
Shopping cart page with payment methods
The example below is based on a subtle gradient background and includes a card with accepted credit card providers.
<section class="h-100 gradient-custom">
<div class="container py-5">
<div class="row d-flex justify-content-center my-4">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">Cart - 2 items</h5>
</div>
<div class="card-body">
<!-- Single item -->
<div class="row">
<div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
<!-- Image -->
<div class="bg-image hover-overlay hover-zoom ripple rounded" data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
class="w-100" alt="Blue Jeans Jacket" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
<!-- Image -->
</div>
<div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
<!-- Data -->
<p><strong>Blue denim shirt</strong></p>
<p>Color: blue</p>
<p>Size: M</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm me-1 mb-2" data-mdb-tooltip-init
title="Remove item">
<i class="fas fa-trash"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger btn-sm mb-2" data-mdb-tooltip-init
title="Move to the wish list">
<i class="fas fa-heart"></i>
</button>
<!-- Data -->
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<!-- Quantity -->
<div class="d-flex mb-4" style="max-width: 300px">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 me-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<div data-mdb-input-init class="form-outline">
<input id="form1" min="0" name="quantity" value="1" type="number" class="form-control" />
<label class="form-label" for="form1">Quantity</label>
</div>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 ms-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<!-- Quantity -->
<!-- Price -->
<p class="text-start text-md-center">
<strong>$17.99</strong>
</p>
<!-- Price -->
</div>
</div>
<!-- Single item -->
<hr class="my-4" />
<!-- Single item -->
<div class="row">
<div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
<!-- Image -->
<div class="bg-image hover-overlay hover-zoom ripple rounded" data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>
<!-- Image -->
</div>
<div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
<!-- Data -->
<p><strong>Red hoodie</strong></p>
<p>Color: red</p>
<p>Size: M</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm me-1 mb-2" data-mdb-tooltip-init
title="Remove item">
<i class="fas fa-trash"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger btn-sm mb-2" data-mdb-tooltip-init
title="Move to the wish list">
<i class="fas fa-heart"></i>
</button>
<!-- Data -->
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<!-- Quantity -->
<div class="d-flex mb-4" style="max-width: 300px">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 me-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<div data-mdb-input-init class="form-outline">
<input id="form1" min="0" name="quantity" value="1" type="number" class="form-control" />
<label class="form-label" for="form1">Quantity</label>
</div>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3 ms-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<!-- Quantity -->
<!-- Price -->
<p class="text-start text-md-center">
<strong>$17.99</strong>
</p>
<!-- Price -->
</div>
</div>
<!-- Single item -->
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<p><strong>Expected shipping delivery</strong></p>
<p class="mb-0">12.10.2020 - 14.10.2020</p>
</div>
</div>
<div class="card mb-4 mb-lg-0">
<div class="card-body">
<p><strong>We accept</strong></p>
<img class="me-2" width="45px"
src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg"
alt="Visa" />
<img class="me-2" width="45px"
src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce-gateway-stripe/assets/images/amex.svg"
alt="American Express" />
<img class="me-2" width="45px"
src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg"
alt="Mastercard" />
<img class="me-2" width="45px"
src="https://mdbcdn.b-cdn.net/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.webp"
alt="PayPal acceptance mark" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0">Summary</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
Products
<span>$53.98</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
Shipping
<span>Gratis</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total amount</strong>
<strong>
<p class="mb-0">(including VAT)</p>
</strong>
</div>
<span><strong>$53.98</strong></span>
</li>
</ul>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg btn-block">
Go to checkout
</button>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* fallback for old browsers */
background: #6a11cb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}
Shopping cart with product cards
The shopping cart page template below includes a list of purchased products created with product cards with an delete icon button, as well as an input field for the discount code.
<section class="h-100">
<div class="container h-100 py-5">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-10">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="fw-normal mb-0">Shopping Cart</h3>
<div>
<p class="mb-0"><span class="text-muted">Sort by:</span> <a href="#!" class="text-body">price <i
class="fas fa-angle-down mt-1"></i></a></p>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Basic T-shirt</p>
<p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">$499.00</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Basic T-shirt</p>
<p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">$499.00</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Basic T-shirt</p>
<p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">$499.00</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Basic T-shirt</p>
<p><span class="text-muted">Size: </span>M <span class="text-muted">Color: </span>Grey</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">$499.00</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body p-4 d-flex flex-row">
<div data-mdb-input-init class="form-outline flex-fill">
<input type="text" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Discound code</label>
</div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-warning btn-lg ms-3">Apply</button>
</div>
</div>
<div class="card">
<div class="card-body">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning btn-block btn-lg">Proceed to Pay</button>
</div>
</div>
</div>
</div>
</div>
</section>
Shopping cart checkout
The example below combines a shopping cart and a checkout in a single template. You can both edit your purchased products as well as credit card forms for setting up the payment.
<section class="h-100 h-custom" style="background-color: #eee;">
<div class="container h-100 py-5">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card shopping-cart" style="border-radius: 15px;">
<div class="card-body">
<div class="row">
<div class="col-lg-6 px-5 py-4">
<h3 class="mb-5 pt-2 text-center fw-bold text-uppercase">Your products</h3>
<div class="d-flex align-items-center mb-5">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/13.webp"
class="img-fluid" style="width: 150px;" alt="Generic placeholder image">
</div>
<div class="flex-grow-1 ms-3">
<a href="#!" class="float-end"><i class="fas fa-times"></i></a>
<h5 class="text-primary">Samsung Galaxy M11 64GB</h5>
<h6 style="color: #9e9e9e;">Color: white</h6>
<div class="d-flex align-items-center">
<p class="fw-bold mb-0 me-5 pe-3">799$</p>
<div class="def-number-input number-input safari_only">
<button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
class="minus"></button>
<input class="quantity fw-bold bg-body-tertiary text-body" min="0" name="quantity" value="1"
type="number">
<button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
class="plus"></button>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-5">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp"
class="img-fluid" style="width: 150px;" alt="Generic placeholder image">
</div>
<div class="flex-grow-1 ms-3">
<a href="#!" class="float-end"><i class="fas fa-times"></i></a>
<h5 class="text-primary">Headphones Bose 35 II</h5>
<h6 style="color: #9e9e9e;">Color: Red</h6>
<div class="d-flex align-items-center">
<p class="fw-bold mb-0 me-5 pe-3">239$</p>
<div class="def-number-input number-input safari_only">
<button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
class="minus"></button>
<input class="quantity fw-bold bg-body-tertiary text-body" min="0" name="quantity" value="1"
type="number">
<button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
class="plus"></button>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-5">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/1.webp"
class="img-fluid" style="width: 150px;" alt="Generic placeholder image">
</div>
<div class="flex-grow-1 ms-3">
<a href="#!" class="float-end"><i class="fas fa-times"></i></a>
<h5 class="text-primary">iPad 9.7 6-gen WiFi 32GB</h5>
<h6 style="color: #9e9e9e;">Color: rose pink</h6>
<div class="d-flex align-items-center">
<p class="fw-bold mb-0 me-5 pe-3">659$</p>
<div class="def-number-input number-input safari_only">
<button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
class="minus"></button>
<input class="quantity fw-bold bg-body-tertiary text-body" min="0" name="quantity" value="2"
type="number">
<button data-mdb-button-init onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
class="plus"></button>
</div>
</div>
</div>
</div>
<hr class="mb-4" style="height: 2px; background-color: #1266f1; opacity: 1;">
<div class="d-flex justify-content-between px-x">
<p class="fw-bold">Discount:</p>
<p class="fw-bold">95$</p>
</div>
<div class="d-flex justify-content-between p-2 mb-2 bg-primary">
<h5 class="fw-bold mb-0">Total:</h5>
<h5 class="fw-bold mb-0">2261$</h5>
</div>
</div>
<div class="col-lg-6 px-5 py-4">
<h3 class="mb-5 pt-2 text-center fw-bold text-uppercase">Payment</h3>
<form class="mb-5">
<div data-mdb-input-init class="form-outline mb-5">
<input type="text" id="typeText" class="form-control form-control-lg" siez="17"
value="1234 5678 9012 3457" minlength="19" maxlength="19" />
<label class="form-label" for="typeText">Card Number</label>
</div>
<div data-mdb-input-init class="form-outline mb-5">
<input type="text" id="typeName" class="form-control form-control-lg" siez="17"
value="John Smith" />
<label class="form-label" for="typeName">Name on card</label>
</div>
<div class="row">
<div class="col-md-6 mb-5">
<div data-mdb-input-init class="form-outline">
<input type="text" id="typeExp" class="form-control form-control-lg" value="01/22"
size="7" id="exp" minlength="7" maxlength="7" />
<label class="form-label" for="typeExp">Expiration</label>
</div>
</div>
<div class="col-md-6 mb-5">
<div data-mdb-input-init class="form-outline">
<input type="password" id="typeText" class="form-control form-control-lg"
value="●●●" size="1" minlength="3" maxlength="3" />
<label class="form-label" for="typeText">Cvv</label>
</div>
</div>
</div>
<p class="mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit <a
href="#!">obcaecati sapiente</a>.</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block btn-lg">Buy now</button>
<h5 class="fw-bold mb-5" style="position: absolute; bottom: 0;">
<a href="#!"><i class="fas fa-angle-left me-2"></i>Back to shopping</a>
</h5>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
.number-input input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input button {
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
height: 2px;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
text-align: center;
}
.number-input.number-input {
border: 1px solid #ced4da;
width: 10rem;
border-radius: .25rem;
}
.number-input.number-input button {
width: 2.6rem;
height: .7rem;
}
.number-input.number-input button.minus {
padding-left: 10px;
}
.number-input.number-input button:before,
.number-input.number-input button:after {
width: .7rem;
background-color: #495057;
}
.number-input.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: 1px solid #ced4da;
border-width: 0 1px;
font-size: 1rem;
height: 2rem;
color: #495057;
}
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color:transparent) {
.number-input.def-number-input.safari_only button:before,
.number-input.def-number-input.safari_only button:after {
margin-top: -.3rem;
}
}
}
.shopping-cart .def-number-input.number-input {
border: none;
}
.shopping-cart .def-number-input.number-input input[type=number] {
max-width: 2rem;
border: none;
}
.shopping-cart .def-number-input.number-input input[type=number].black-text,
.shopping-cart .def-number-input.number-input input.btn.btn-link[type=number],
.shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:hover,
.shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:focus {
color: #212529 !important;
}
.shopping-cart .def-number-input.number-input button {
width: 1rem;
}
.shopping-cart .def-number-input.number-input button:before,
.shopping-cart .def-number-input.number-input button:after {
width: .5rem;
}
.shopping-cart .def-number-input.number-input button.minus:before,
.shopping-cart .def-number-input.number-input button.minus:after {
background-color: #9e9e9e;
}
.shopping-cart .def-number-input.number-input button.plus:before,
.shopping-cart .def-number-input.number-input button.plus:after {
background-color: #4285f4;
}
Shopping cart review page
This shopping cart example includes an additional column for the final review of the product color.
Shopping Cart (1 item in your cart)
Name
iPad Air
Color
pink rose
Quantity
1
Price
$799
Total
$799
Order total: $799
<section class="vh-100" style="background-color: #fdccbc;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<p><span class="h2">Shopping Cart </span><span class="h4">(1 item in your cart)</span></p>
<div class="card mb-4">
<div class="card-body p-4">
<div class="row align-items-center">
<div class="col-md-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/1.webp"
class="img-fluid" alt="Generic placeholder image">
</div>
<div class="col-md-2 d-flex justify-content-center">
<div>
<p class="small text-muted mb-4 pb-2">Name</p>
<p class="lead fw-normal mb-0">iPad Air</p>
</div>
</div>
<div class="col-md-2 d-flex justify-content-center">
<div>
<p class="small text-muted mb-4 pb-2">Color</p>
<p class="lead fw-normal mb-0"><i class="fas fa-circle me-2" style="color: #fdd8d2;"></i>
pink rose</p>
</div>
</div>
<div class="col-md-2 d-flex justify-content-center">
<div>
<p class="small text-muted mb-4 pb-2">Quantity</p>
<p class="lead fw-normal mb-0">1</p>
</div>
</div>
<div class="col-md-2 d-flex justify-content-center">
<div>
<p class="small text-muted mb-4 pb-2">Price</p>
<p class="lead fw-normal mb-0">$799</p>
</div>
</div>
<div class="col-md-2 d-flex justify-content-center">
<div>
<p class="small text-muted mb-4 pb-2">Total</p>
<p class="lead fw-normal mb-0">$799</p>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-5">
<div class="card-body p-4">
<div class="float-end">
<p class="mb-0 me-5 d-flex align-items-center">
<span class="small text-muted me-2">Order total:</span> <span
class="lead fw-normal">$799</span>
</p>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light btn-lg me-2">Continue shopping</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Add to cart</button>
</div>
</div>
</div>
</div>
</section>
Shopping cart summary page
Another template combining both shopping cart and checkout on a single page providing an extensive summary o purchased products, subtotals, shipping cost and total price.
| Shopping Bag | Format | Quantity | Price |
|---|---|---|---|
Thinking, Fast and Slow Daniel Kahneman |
Digital |
|
$9.99 |
Homo Deus: A Brief History of Tomorrow Yuval Noah Harari |
Paperback |
|
$13.50 |
Subtotal
$23.49
Shipping
$2.99
Total (tax included)
$26.48
<section class="h-100 h-custom">
<div class="container h-100 py-5">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="h5">Shopping Bag</th>
<th scope="col">Format</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div class="d-flex align-items-center">
<img src="https://i.imgur.com/2DsA49b.webp" class="img-fluid rounded-3"
style="width: 120px;" alt="Book">
<div class="flex-column ms-4">
<p class="mb-2">Thinking, Fast and Slow</p>
<p class="mb-0">Daniel Kahneman</p>
</div>
</div>
</th>
<td class="align-middle">
<p class="mb-0" style="font-weight: 500;">Digital</p>
</td>
<td class="align-middle">
<div class="d-flex flex-row">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm" style="width: 50px;" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
</td>
<td class="align-middle">
<p class="mb-0" style="font-weight: 500;">$9.99</p>
</td>
</tr>
<tr>
<th scope="row" class="border-bottom-0">
<div class="d-flex align-items-center">
<img src="https://i.imgur.com/Oj1iQUX.webp" class="img-fluid rounded-3"
style="width: 120px;" alt="Book">
<div class="flex-column ms-4">
<p class="mb-2">Homo Deus: A Brief History of Tomorrow</p>
<p class="mb-0">Yuval Noah Harari</p>
</div>
</div>
</th>
<td class="align-middle border-bottom-0">
<p class="mb-0" style="font-weight: 500;">Paperback</p>
</td>
<td class="align-middle border-bottom-0">
<div class="d-flex flex-row">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" style="width: 50px;" />
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
</td>
<td class="align-middle border-bottom-0">
<p class="mb-0" style="font-weight: 500;">$13.50</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
<div class="card-body p-4">
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3 mb-4 mb-md-0">
<form>
<div class="d-flex flex-row pb-3">
<div class="d-flex align-items-center pe-2">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1v"
value="" aria-label="..." checked />
</div>
<div class="rounded border w-100 p-3">
<p class="d-flex align-items-center mb-0">
<i class="fab fa-cc-mastercard fa-2x text-body pe-2"></i>Credit
Card
</p>
</div>
</div>
<div class="d-flex flex-row pb-3">
<div class="d-flex align-items-center pe-2">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel2v"
value="" aria-label="..." />
</div>
<div class="rounded border w-100 p-3">
<p class="d-flex align-items-center mb-0">
<i class="fab fa-cc-visa fa-2x fa-lg text-body pe-2"></i>Debit Card
</p>
</div>
</div>
<div class="d-flex flex-row">
<div class="d-flex align-items-center pe-2">
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel3v"
value="" aria-label="..." />
</div>
<div class="rounded border w-100 p-3">
<p class="d-flex align-items-center mb-0">
<i class="fab fa-cc-paypal fa-2x fa-lg text-body pe-2"></i>PayPal
</p>
</div>
</div>
</form>
</div>
<div class="col-md-6 col-lg-4 col-xl-6">
<div class="row">
<div class="col-12 col-xl-6">
<div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
<input type="text" id="typeName" class="form-control form-control-lg" siez="17"
placeholder="John Smith" />
<label class="form-label" for="typeName">Name on card</label>
</div>
<div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
<input type="text" id="typeExp" class="form-control form-control-lg" placeholder="MM/YY"
size="7" id="exp" minlength="7" maxlength="7" />
<label class="form-label" for="typeExp">Expiration</label>
</div>
</div>
<div class="col-12 col-xl-6">
<div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
<input type="text" id="typeText" class="form-control form-control-lg" siez="17"
placeholder="1111 2222 3333 4444" minlength="19" maxlength="19" />
<label class="form-label" for="typeText">Card Number</label>
</div>
<div data-mdb-input-init class="form-outline mb-4 mb-xl-5">
<input type="password" id="typeText" class="form-control form-control-lg"
placeholder="●●●" size="1" minlength="3" maxlength="3" />
<label class="form-label" for="typeText">Cvv</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-3">
<div class="d-flex justify-content-between" style="font-weight: 500;">
<p class="mb-2">Subtotal</p>
<p class="mb-2">$23.49</p>
</div>
<div class="d-flex justify-content-between" style="font-weight: 500;">
<p class="mb-0">Shipping</p>
<p class="mb-0">$2.99</p>
</div>
<hr class="my-4">
<div class="d-flex justify-content-between mb-4" style="font-weight: 500;">
<p class="mb-2">Total (tax included)</p>
<p class="mb-2">$26.48</p>
</div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block btn-lg">
<div class="d-flex justify-content-between">
<span>Checkout</span>
<span>$26.48</span>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}