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
<!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> |
Related:
Boostrap5 Blog Template Example
|
Article Contributed By :
|
|
|
|
|
842 Views |
|