E-commerce
Use the following Bootstrap 5 powered e-commerce components for your online web shop
Product card
The following component can be used as the base layout for a product card:
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow">
<img src="../../assets/img/shop/item-1.png" alt="apple watch">
<div class="card-footer bg-gray-200 border-top border-gray-300 p-4">
<a href="#" class="h5">Apple watch</a>
<div class="mt-2">$299.00</div>
</div>
</div>
</div>
</div>Add to cart
The following example of a product card also has an add to cart button:
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow">
<img src="../../assets/img/shop/item-1.png" alt="watch large">
<div class="card-footer bg-gray-200 border-top border-gray-300 p-4">
<a href="#" class="h5">Apple watch</a>
<div class="d-flex mt-2">
<span class="badge bg-primary me-2">apple</span>
<span class="badge bg-primary me-2">watch</span>
<span class="badge bg-primary">white</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<span class="h6 mb-0 text-gray">$299.00</span>
<a class="btn btn-xs btn-tertiary" href="#">
<span class="fas fa-cart-plus me-2"></span> Add to cart
</a>
</div>
</div>
</div>
</div>
</div>Reviews
Use the following example to also show the reviews for a product:
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow">
<img src="../../assets/img/shop/item-1.png" alt="black watch">
<div class="card-footer border-top border-gray-300 p-4">
<a href="#" class="h5">Apple Watch Series 3</a>
<h3 class="h6 fw-light text-gray mt-2">Space Gray Aluminum Case with Black Sport Band</h3>
<div class="d-flex mt-3">
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning"></span>
<span class="badge bg-primary ms-2">4.7</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<span class="h5 mb-0 text-gray">$299.00</span>
<a class="btn btn-xs btn-tertiary" href="#">
<span class="fas fa-cart-plus me-2"></span> Add to cart
</a>
</div>
</div>
</div>
</div>
</div>Alternative
Use the following product card as an alternative design to the default example:
<div class="row">
<div class="col-12 col-md-8">
<div class="card shadow">
<div class="card-header bg-gray-200 border-0">
<img src="../../assets/img/shop/item-2.png" alt="Beats speakers">
</div>
<div class="card-body border-top border-gray-300">
<a href="#" class="h5">Beats Pill</a>
<h3 class="h6 fw-light text-gray mt-2">Black Beats Pill + Portable Speaker</h3>
<div class="d-flex mt-3">
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning"></span>
<span class="badge badge-pill badge-gray ms-2">4.7</span>
</div>
</div>
<div class="card-footer bg-gray-200 border-top border-gray-300 p-4">
<div class="d-flex align-items-center">
<span class="h5 mb-0 text-gray text-through me-2">
$299.00
</span>
<span class="h6 mb-0 text-danger">$199.00</span>
<div class="ms-auto">
<button class="btn btn-icon-only btn-tertiary px-1" type="button" aria-label="add to cart button" title="add to cart button">
<span aria-hidden="true" class="fas fa-cart-plus"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>Horizontal
Use the following card example for a horizontal card view. You can also use it as a featured item:
Apple Watch Series 3
4.7
150 orders
Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.
<div class="card shadow p-4">
<div class="row align-items-center">
<aside class="col-md-3">
<a href="#">
<img src="../../assets/img/shop/item-1.png" alt="premium watch">
</a>
</aside> <!-- col.// -->
<div class="col-md-6">
<div class="info-main">
<a href="#" class="h5 title"> Apple Watch Series 3 </a>
<div class="d-flex my-3">
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning me-1"></span>
<span class="star fas fa-star text-warning"></span>
<span class="badge badge-pill badge-gray ms-2">4.7</span>
<span class="small text-success ms-3"><span class="fas fa-shopping-cart me-1"></span>150 orders</span>
</div>
<p>Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.</p>
</div>
</div>
<div class="col-12 col-md-3">
<div class="d-flex align-items-center">
<span class="h5 mb-0 text-gray text-through me-2">
$299.00
</span>
<span class="h6 mb-0 text-danger">$199.00</span>
</div> <!-- info-price-detail // -->
<span class="text-success small"><span class="fas fa-shipping-fast me-1"></span>Free shipping</span>
<div class="d-grid gap-2 mt-4">
<a class="btn btn-tertiary btn-sm" href="#">
Details
</a>
<a href="#" class="btn btn-tertiary btn-sm"><span class="fa fa-heart me-1"></span>
Wishlist
</a>
</div>
</div>
</div>
</div>Filters
Use the filter components in the sidebar to search and filter for the products.
Price range
Use the following example to filter the products based on the minimum and maximum price.
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow">
<div class="card-body">
<h3 class="h5 card-title">Price range</h3>
<!-- Simple slider -->
<div class="input-slider-container">
<div id="input-slider-ecommerce" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
<!-- Input slider values -->
<div class="row mt-3 d-none">
<div class="col-6">
<span id="input-slider-value" class="range-slider-value" data-range-value-low="200"></span>
</div>
</div>
</div>
<!-- End of Slider -->
<div class="d-flex mb-3">
<div class="col-md-6 me-2">
<label for="priceRangeMin1">Min</label>
<input class="form-control" id="priceRangeMin1" placeholder="$0" type="number">
</div>
<div class="col-md-6 text-right">
<label for="priceRangeMax1">Max</label>
<input class="form-control" id="priceRangeMax1" placeholder="$1,0000" type="number">
</div>
</div>
<div class="d-grid">
<a href="#" class="btn btn-tertiary">Apply</a>
</div>
</div>
</div>
</div>
</div>Checkboxes
Use the following example to filter the products based on categories, tags, technologies using checkbox elements:
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow">
<div class="card-body">
<h3 class="h5 card-title">Colors</h3>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cartCheck1">
<label class="form-check-label" for="cartCheck1">
Red
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cartCheck2">
<label class="form-check-label" for="cartCheck2">
Black
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cartCheck3">
<label class="form-check-label" for="cartCheck3">
White
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cartCheck4">
<label class="form-check-label" for="cartCheck4">
Green
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="cartCheck5">
<label class="form-check-label" for="cartCheck5">
Orange
</label>
</div>
</div>
</div>
<a href="#" class="btn btn-outline-primary btn-sm">Reset</a>
</div>
</div>
</div>
</div>Checkboxes vertical
Categories
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow">
<div class="card-body">
<h3 class="h5 card-title">Categories</h3>
<div class="row">
<div class="col-12">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="" id="cartCheck6">
<label class="form-check-label" for="cartCheck6">
All Products
</label>
</div>
</div>
<div class="col-12">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="" id="cartCheck7">
<label class="form-check-label" for="cartCheck7">
Headphones
</label>
</div>
</div>
<div class="col-12">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="" id="cartCheck8">
<label class="form-check-label" for="cartCheck8">
Speakers
</label>
</div>
</div>
<div class="col-12">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="" id="cartCheck9">
<label class="form-check-label" for="cartCheck9">
Mouse
</label>
</div>
</div>
<div class="col-12">
<div class="form-check mb-1">
<input class="form-check-input" type="checkbox" value="" id="cartCheck10">
<label class="form-check-label" for="cartCheck10">
Stands
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Categories
<div class="row">
<div class="col-12 col-md-4">
<div class="card shadow">
<div class="card-body">
<h3 class="h5 card-title">Product type</h3>
<ul class="list-group text-gray">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
<a href="#" class="text-decoration-none">Watches</a>
<span class="badge bg-gray badge-pill">123</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
<a href="#" class="text-decoration-none">Laptops</a>
<span class="badge bg-gray badge-pill">330</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
<a href="#" class="text-decoration-none">Console</a>
<span class="badge bg-gray badge-pill">99</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
<a href="#" class="text-decoration-none">TV</a>
<span class="badge bg-gray badge-pill">210</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 py-1 px-0 font-small">
<a href="#" class="text-decoration-none">Tablets</a>
<span class="badge bg-gray badge-pill">134</span>
</li>
</ul>
</div>
</div>
</div>
</div>