In this bootstrap5 examples we will create simple E-Commerce template. This E-Commerce template contains lst of books display as grid, show books by count, filter books by category and price... Let's create bootstrap5 ecommerce Template Related: Boostrap5 Blog Template Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.img-thumbnail{
height: 240px;
width: 240px!important;
}
a{
text-decoration:none;
}
</style>
<title>Bootstrap 5 E-Commerce Template</title>
</head>
<body style="background-color: #c0dba194;">
<div class="container pt-5">
<div class="row">
<div class="col-md-8 order-md-2 col-lg-9">
<div class="container-fluid">
<div class="row mb-5">
<div class="col-12">
<div class="dropdown text-md-left text-center float-md-left mb-3 mt-3 mt-md-0 mb-md-0">
<label class="mr-2">Sort by:</label>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Relevance
</button>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" x-placement="bottom-start"
style="position: absolute; transform: translate3d(71px, 48px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Relevance</a>
<a class="dropdown-item" href="#">Price Descending</a>
<a class="dropdown-item" href="#">Price Ascending</a>
<a class="dropdown-item" href="#">Best Selling</a>
</div>
</div>
<div><p></p></div>
<div class="text-center">
<div class="btn-group float-md-right ml-3 ">
<button type="button" class="btn btn-primary"> <span class="fa fa-arrow-left"></span> </button>
<button type="button" class="btn btn-danger"> <span class="fa fa-arrow-right"></span> </button>
</div>
</div>
<div class="dropdown">
<label class="mr-2">View:</label>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
12
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">12</a>
<a class="dropdown-item" href="#">24</a>
<a class="dropdown-item" href="#">48</a>
<a class="dropdown-item" href="#">96</a>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1877/course_1877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/python_quick_interview_guide/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Quick Interview Guide</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$110</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4907/course_4907_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/practical-python-programming/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Basic Tutorial</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$100</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4877/course_4877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/prime-pack/linux-prime-pack/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Linux Primepack</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$250</s> $25 </i>
</h5>
</div>
</div>
</div><div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1877/course_1877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/python_quick_interview_guide/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Quick Interview Guide</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$110</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4907/course_4907_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/practical-python-programming/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Basic Tutorial</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$100</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4877/course_4877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/prime-pack/linux-prime-pack/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Linux Primepack</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$250</s> $25 </i>
</h5>
</div>
</div>
</div><div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1877/course_1877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/python_quick_interview_guide/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Quick Interview Guide</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$110</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4907/course_4907_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/practical-python-programming/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Basic Tutorial</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$100</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4877/course_4877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/prime-pack/linux-prime-pack/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Linux Primepack</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$250</s> $25 </i>
</h5>
</div>
</div>
</div><div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1877/course_1877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/python_quick_interview_guide/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Quick Interview Guide</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$110</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4907/course_4907_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/ebook/practical-python-programming/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Python Basic Tutorial</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$100</s> $10 </i>
</h5>
</div>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-0">
<div class="card-img-top">
<img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4877/course_4877_image.jpg" class="img-thumbnail mx-auto d-block" alt="Card image cap">
</div>
<div class="card-body text-center">
<h4 class="card-title">
<a href="https://www.tutorialspoint.com/prime-pack/linux-prime-pack/index.asp" class=" font-weight-bold text-dark text-uppercase small"> Linux Primepack</a>
</h4>
<h5 class="card-price small text-warning">
<i class="btn-success">
<s class="btn-danger">$250</s> $25 </i>
</h5>
</div>
</div>
</div>
</div>
<div class="row sorting mb-5 mt-5">
<div class="col-12">
<button class="btn btn-light">
<a class="dropdown-item" href="#"><i class="fas fa-arrow-up mr-2"> </i> Back to top</a>
</button>
<div class="btn-group float-md-right ml-3">
<button type="button" class="btn btn-lg btn-primary"> <span class="fa fa-arrow-left"></span> </button>
<button type="button" class="btn btn-lg btn-danger"> <span class="fa fa-arrow-right"></span> </button>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
12
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">12</a>
<a class="dropdown-item" href="#">24</a>
<a class="dropdown-item" href="#">48</a>
<a class="dropdown-item" href="#">96</a>
</ul>
</div>
</div>
</div>
</div>
</div><div class="col-md-4 order-md-1 col-lg-3 sidebar-filter">
<h3 class="mt-0 mb-5">Showing <span class="text-danger">12</span> Ebooks</h3>
<h6 class="text-uppercase font-weight-bold mb-3">Categories</h6>
<div class="mt-2 mb-2 pl-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="category-1">
<label class="custom-control-label" for="category-1">Programming</label>
</div>
</div>
<div class="mt-2 mb-2 pl-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="category-2">
<label class="custom-control-label" for="category-2">Web development</label>
</div>
</div>
<div class="mt-2 mb-2 pl-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="category-3">
<label class="custom-control-label" for="category-3">Mobile Development</label>
</div>
</div>
<div class="mt-2 mb-2 pl-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="category-4">
<label class="custom-control-label" for="category-4">Server side development</label>
</div>
</div>
<div class="mt-2 mb-2 pl-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="category-5">
<label class="custom-control-label" for="category-5">Android</label>
</div>
</div>
<div class="mt-2 mb-2 pl-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="category-6">
<label class="custom-control-label" for="category-6">Go lang</label>
</div>
</div>
<div class="divider mt-5 mb-5 border-bottom border-secondary"></div>
<div class="divider mt-5 mb-5 border-bottom border-secondary"></div>
<h6 class="text-uppercase mt-5 mb-3 font-weight-bold">Price</h6>
<div class="price-filter-control">
<input type="number" class="form-control w-50 pull-left mb-2" value="10" id="price-min-control">
<input type="number" class="form-control w-50 pull-right" value="100" id="price-max-control">
</div>
<input id="ex2" type="text" class="slider " value="10,100" data-slider-min="10" data-slider-max="200" data-slider-step="5" data-slider-value="[50,150]" data-value="50,150" style="display: none;">
<div class="divider mt-5 mb-5 border-bottom border-secondary"></div>
<a href="#" class="btn btn-lg btn-block btn-primary mt-5">Update Results</a>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
|
Article Contributed By :
|
|
|
|
|
419 Views |
|