→ Zahid Hasan Riyad
→ E-commarce index file

E-commarce index file

This bootstrap css example is contributed by Zahid Hasan Riyad, on 01-Jul-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Footer Header Card Form Carousel

Author Zahid Hasan Riyad

136

v.5.3

Fork Fullscreen

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ShopEasy</a>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="product-page.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="product-details-page.html">Product details</a></li>
<li class="nav-item"><a class="nav-link" href="cart-page.html">Cart</a></li>
<li class="nav-item"><a class="nav-link" href="checkout-page.html">Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="contact-page.html">Contact</a></li>
</ul>
</div>
</div>
</nav>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.pexels.com/photos/13162091/pexels-photo-13162091.jpeg?_gl=1*s8vwtd*_ga*MTkzMTg4NjU1NC4xNzc3MjgzNDIy*_ga_8JE65Q40S6*czE3ODIwNDE5NTQkbzIkZzEkdDE3ODIwNDIwMzckajQwJGwwJGgw" class="d-block w-100" height="450"  alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://images.pexels.com/photos/1456733/pexels-photo-1456733.jpeg?_gl=1*14e151c*_ga*MTkzMTg4NjU1NC4xNzc3MjgzNDIy*_ga_8JE65Q40S6*czE3ODIwNDE5NTQkbzIkZzEkdDE3ODIwNDIxNjkkajM4JGwwJGgw" class="d-block w-100" height="400" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://cdn.pixabay.com/photo/2016/04/08/18/46/as_photography-shopping-mall-1316787_1280.jpg" class="d-block w-100" height="400" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<div class="container py-5">
        
        <div class="text-center mb-5">
            <h2 class="fw-bold">Featured Products</h2>
            <p class="text-muted">Check out our weekly bestsellers and top-rated items</p>
        </div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            
            
            <div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <span class="badge bg-danger sale-badge">Sale</span>
                    <img src="https://cdn.pixabay.com/photo/2016/11/19/16/01/audio-1840073_1280.jpg" class="card-img-top" alt="Wireless Headphones">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Premium Wireless Headphones</h5>
                        <p class="text-muted small">Noise-canceling, 40-hour battery</p>
                        <div class="mt-auto">
                            <span class="text-danger fw-bold fs-4">$129.99</span>
                            <span class="text-muted text-decoration-line-through ms-2">$199.99</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <img src="https://cdn.pixabay.com/photo/2013/07/11/15/30/male-watch-144648_1280.jpg" class="card-img-top" alt="Minimalist Watch">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Minimalist Analog Watch</h5>
                        <p class="text-muted small">Stainless steel, water-resistant</p>
                        <div class="mt-auto">
                            <span class="text-dark fw-bold fs-4">$149.00</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <span class="badge bg-success sale-badge">New</span>
                    <img src="https://cdn.pixabay.com/photo/2023/10/07/14/24/smartwatch-8300238_1280.jpg" class="card-img-top" alt="Smartwatch">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Sport Smartwatch</h5>
                        <p class="text-muted small">Heart rate monitor, GPS, fit</p>
                        <div class="mt-auto">
                            <span class="text-danger fw-bold fs-4">$199.99</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

<div class="col">
                <div class="card product-card border-0 shadow-sm position-relative">
                    <img src="https://cdn.pixabay.com/photo/2018/09/17/14/27/headphones-3683983_1280.jpg" class="card-img-top" alt="Headset">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Studio Pro Headset</h5>
                        <p class="text-muted small">Over-ear, bass boost</p>
                        <div class="mt-auto">
                            <span class="text-dark fw-bold fs-4">$79.99</span>
                            <button class="btn btn-dark w-100 mt-2">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>

</div>
    </div>

<div class="container py-5">
        
        <div class="row justify-content-center mb-5 text-center">
            <div class="col-lg-6">
                <span class="text-primary fw-bold text-uppercase">Our Categories</span>
                <h2 class="display-6 fw-bold">Explore Top Categories</h2>
                <p class="text-muted">Find exactly what you need with our carefully curated and categorized collections.</p>
            </div>
        </div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            
            
            <div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-laptop category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Electronics</h5>
                            <p class="card-text text-muted small">Smartphones, laptops, gadgets, and accessories.</p>
                        </div>
                    </div>
                </a>
            </div>

<div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-cart3 category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Fashion</h5>
                            <p class="card-text text-muted small">Latest trends in apparel, footwear, and watches.</p>
                        </div>
                    </div>
                </a>
            </div>

<div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-house-door category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Home & Kitchen</h5>
                            <p class="card-text text-muted small">Decor, appliances, furniture, and cookware.</p>
                        </div>
                    </div>
                </a>
            </div>

<div class="col">
                <a href="#" class="text-decoration-none text-dark">
                    <div class="category-card card h-100 p-4 text-center bg-white shadow-sm">
                        <div class="my-3">
                            <i class="bi bi-bicycle category-icon"></i>
                        </div>
                        <div class="card-body p-0">
                            <h5 class="card-title fw-bold mb-2">Sports & Outdoors</h5>
                            <p class="card-text text-muted small">Gear, apparel, and equipment for all activities.</p>
                        </div>
                    </div>
                </a>
            </div>
            
        </div>
    </div>

<section class="py-5">
        <div class="container">
            
            <div class="text-center mb-5">
                <span class="text-primary fw-bold text-uppercase tracking-wide">Limited Time</span>
                <h2 class="display-5 fw-bold text-dark">Exclusive Special Offers</h2>
                <p class="text-muted mx-auto" style="max-width: 500px;">
                    Grab these amazing deals before they expire. Elevate your experience with top-tier quality at unbeatable prices.
                </p>
            </div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                
                
                <div class="col">
                    <div class="card h-100 border-0 shadow-sm offer-card position-relative">
                        <span class="badge bg-danger badge-discount shadow-sm">20% OFF</span>
                        <img src="https://cdn.pixabay.com/photo/2015/01/20/12/51/mobile-605422_1280.jpg" class="card-img-top" alt="Premium Headphones" style="height: 250px; object-fit: cover;">
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold">Premium Wireless Headphones</h5>
                            <p class="card-text text-muted flex-grow-1">Experience crystal-clear sound, active noise cancellation, and a 40-hour battery life.</p>
                            <div class="mt-3">
                                <span class="text-decoration-line-through text-muted fs-5 me-2">$199.99</span>
                                <span class="text-primary fw-bold fs-3">$159.99</span>
                            </div>
                            <a href="#" class="btn btn-dark w-100 mt-3 py-2">Add to cart</a>
                        </div>
                    </div>
                </div>

<div class="col">
                    <div class="card h-100 border-0 shadow-sm offer-card position-relative">
                        <span class="badge bg-danger badge-discount shadow-sm">Save $50</span>
                        <img src="https://cdn.pixabay.com/photo/2014/09/24/14/29/macbook-459196_1280.jpg" class="card-img-top" alt="Laptop" style="height: 250px; object-fit: cover;">
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold">Pro Creator Laptop 14"</h5>
                            <p class="card-text text-muted flex-grow-1">Lightning-fast processing, 16GB RAM, and a stunning retina display for creators and professionals.</p>
                            <div class="mt-3">
                                <span class="text-decoration-line-through text-muted fs-5 me-2">$999.00</span>
                                <span class="text-primary fw-bold fs-3">$949.00</span>
                            </div>
                            <a href="#" class="btn btn-dark w-100 mt-3 py-2">Add to cart</a>
                        </div>
                    </div>
                </div>

<div class="col">
                    <div class="card h-100 border-0 shadow-sm offer-card position-relative">
                        <span class="badge bg-warning text-dark badge-discount shadow-sm">Flash Sale</span>
                        <img src="https://cdn.pixabay.com/photo/2015/06/25/17/22/smart-watch-821559_1280.jpg" class="card-img-top" alt="Smartwatch" style="height: 250px; object-fit: cover;">
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold">Classic Smartwatch Series V</h5>
                            <p class="card-text text-muted flex-grow-1">Track your fitness, manage notifications, and look elegant with this timeless smartwatch design.</p>
                            <div class="mt-3">
                                <span class="text-decoration-line-through text-muted fs-5 me-2">$249.99</span>
                                <span class="text-primary fw-bold fs-3">$179.99</span>
                            </div>
                            <a href="#" class="btn btn-dark w-100 mt-3 py-2">Add to cart</a>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">What Our Customers Say</h2>
            <p class="text-muted">Trusted by thousands of happy customers</p>
        </div>

<div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/80"
                             class="rounded-circle mb-3"
                             alt="Customer">
                        <h5 class="card-title">John Doe</h5>
                        <div class="text-warning mb-2">
                            ★★★★★
                        </div>
                        <p class="card-text text-muted">
                            Amazing service! The quality exceeded my expectations.
                            Highly recommended for everyone.
                        </p>
                    </div>
                </div>
            </div>

<div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/80"
                             class="rounded-circle mb-3"
                             alt="Customer">
                        <h5 class="card-title">Sarah Smith</h5>
                        <div class="text-warning mb-2">
                            ★★★★★
                        </div>
                        <p class="card-text text-muted">
                            Fast delivery and excellent customer support.
                            Will definitely order again.
                        </p>
                    </div>
                </div>
            </div>

<div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center">
                        <img src="https://via.placeholder.com/80"
                             class="rounded-circle mb-3"
                             alt="Customer">
                        <h5 class="card-title">Michael Lee</h5>
                        <div class="text-warning mb-2">
                            ★★★★☆
                        </div>
                        <p class="card-text text-muted">
                            Great experience overall. Product quality is very good
                            and worth the price.
                        </p>
                    </div>
                </div>
            </div>

</div>
    </div>
</section>

<section class="py-5 bg-white border-top">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <form class="needs-validation p-4 border rounded shadow-sm" novalidate>
                        <h3 class="fw-bold text-center mb-4">Leave Feedback</h3>
                        <div class="mb-3"><input type="text" class="form-control" placeholder="Name" required></div>
                        <div class="mb-3"><input type="email" class="form-control" placeholder="Email" required></div>
                        <div class="mb-3"><textarea class="form-control" rows="3" placeholder="Message" required></textarea></div>
                        <button type="submit" class="btn btn-primary w-100">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<footer class="mt-auto">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        <h5>About Us</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ante mollis quam tristique convallis.</p>
      </div>
      <div class="col-md-4 mb-3">
        <h5>Quick Links</h5>
        <ul class="list-unstyled">
          <li><a href="#" class="text-decoration-none text-white">Home</a></li>
          <li><a href="#" class="text-decoration-none text-white">Services</a></li>
          <li><a href="#" class="text-decoration-none text-white">Contact</a></li>
        </ul>
      </div>
      <div class="col-md-4 mb-3">
        <h5>Follow Us</h5>
        <ul class="list-inline social-icons">
          <li class="list-inline-item"><a href="#" class="text-white"><i class="bi bi-facebook"></i></a></li>
          <li class="list-inline-item"><a href="#" class="text-white"><i class="bi bi-twitter"></i></a></li>
          <li class="list-inline-item"><a href="#" class="text-white"><i class="bi bi-instagram"></i></a></li>
        </ul>
      </div>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-md-12 text-center">
        <p>&copy; 2026 Your Company. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>

    
        
<footer class="footer text-center mt-3">
    <div class="container">
        <p>Copyright &copy; 2026. All rights reserved.<span class="text-danger"> &hearts;</span>Designed with Md.Zahid Hasan</p>
        
        <span id="dt"></span>
    </div>
</footer>

More Examples

existing client section
do noy copy

Author:
Fitar Ahmed

2 months ago

282

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2k

v.4.6
Navbar Scrollspy

Author:
java stories story

10 months ago

2.2k

v.5.3
Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

2 years ago

3.3k

v.5.3
Plant

Author:
Code Bro io

3 days ago

16

v.5.3
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

2k

v.5.3
E-Commarce Checkout-page

Author:
Zahid Hasan Riyad

3 weeks ago

79

v.5.3
Services part

Author:
istiakahmedchowdhury10

3 days ago

24

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

1 week ago

79

v.5.3
progress-steps
progress-steps

Author:
Rami AlAjo

1 year ago

2.5k

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

1 year ago

8.7k

v.4.6
my purpose

Author:
Gana JNsksk

2 months ago

514

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent