Bootstrap5 E-Commerce template example

Published October 08, 2021


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...

 

Bootstrap e-commerce template

 

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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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&nbsp; &nbsp;   </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> &nbsp; $10  &nbsp; &nbsp;   &nbsp; &nbsp;   </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&nbsp; &nbsp;   </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">&nbsp; &nbsp;   </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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

78 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions