DEV Community

Cover image for How to Create a Bootstrap Product Detail Page: A Step-by-Step Tutorial
TemplatesJungle
TemplatesJungle

Posted on

How to Create a Bootstrap Product Detail Page: A Step-by-Step Tutorial

#bootstrap #ecommerce #tutorial #html

Based on the FoodMart HTML template, this tutorial will guide you through building a professional e-commerce product detail page using Bootstrap 5. The template demonstrates a comprehensive product page with image galleries, product options, tabs, and related products.

Product Detail Page

Overview of the Product Detail Page Structure

The product detail page from FoodMart consists of several key sections:

  • Product image gallery with thumbnail navigation
  • Product information (title, price, description, options)
  • Color and size selectors
  • Quantity picker with add to cart functionality
  • Tabbed content (Description, Additional Info, Reviews)
  • Related products carousel

Prerequisites

Include these dependencies in your HTML:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Swiper JS for carousels -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">

<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
Enter fullscreen mode Exit fullscreen mode

Step 1: Create the Product Image Gallery

The template uses a dual Swiper slider setup: a thumbnail slider and a main image slider that work together.

HTML Structure for Image Gallery 

<section id="selling-product" class="single-product mt-0 mt-md-5">
  <div class="container-fluid">
    <!-- Breadcrumb navigation -->
    <nav class="breadcrumb">
      <a class="breadcrumb-item" href="#">Home</a>
      <a class="breadcrumb-item" href="#">Pages</a>
      <span class="breadcrumb-item active">Single Product</span>
    </nav>

    <div class="row g-5">
      <!-- Left Column: Product Images -->
      <div class="col-lg-7">
        <div class="row flex-column-reverse flex-lg-row">
          <!-- Thumbnail Navigation Column -->
          <div class="col-md-12 col-lg-2">
            <div class="swiper product-thumbnail-slider">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="images/product-thumbnail-1.jpg" alt="thumbnail" class="thumb-image img-fluid">
                </div>
                <div class="swiper-slide">
                  <img src="images/product-thumbnail-2.jpg" alt="thumbnail" class="thumb-image img-fluid">
                </div>
                <!-- Add more thumbnails as needed -->
              </div>
            </div>
          </div>

          <!-- Main Image Column -->
          <div class="col-md-12 col-lg-10">
            <div class="swiper product-large-slider">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="image-zoom" data-scale="2.5">
                    <img src="images/product-large-1.jpg" alt="product-large" class="img-fluid">
                  </div>
                </div>
                <!-- Add more main images matching thumbnails -->
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column: Product Info -->
      <div class="col-lg-5">
        <!-- Product details go here -->
      </div>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

JavaScript to Link Thumbnail and Main Sliders 

// Initialize Swiper sliders
var productThumbnailSlider = new Swiper('.product-thumbnail-slider', {
  loop: true,
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});

var productLargeSlider = new Swiper('.product-large-slider', {
  loop: true,
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  thumbs: {
    swiper: productThumbnailSlider,
  },
});
Enter fullscreen mode Exit fullscreen mode

Step 2: Build the Product Information Section

Product Title and Rating 

<div class="product-info">
  <div class="element-header">
    <h2 itemprop="name" class="display-6">Cashew Butter 500mg CBD</h2>

    <!-- Rating Stars -->
    <div class="rating-container d-flex gap-0 align-items-center">
      <div class="rating" data-rating="1">
        <svg width="32" height="32" class="text-primary">
          <use xlink:href="#star-solid"></use>
        </svg>
      </div>
      <div class="rating" data-rating="2">
        <svg width="32" height="32" class="text-primary">
          <use xlink:href="#star-solid"></use>
        </svg>
      </div>
      <div class="rating" data-rating="3">
        <svg width="32" height="32" class="text-primary">
          <use xlink:href="#star-solid"></use>
        </svg>
      </div>
      <div class="rating" data-rating="4">
        <svg width="32" height="32" class="text-secondary">
          <use xlink:href="#star-solid"></use>
        </svg>
      </div>
      <div class="rating" data-rating="5">
        <svg width="32" height="32" class="text-secondary">
          <use xlink:href="#star-solid"></use>
        </svg>
      </div>
      <span class="rating-count">(3.5)</span>
    </div>
  </div>

  <!-- Product Price -->
  <div class="product-price pt-3 pb-3">
    <strong class="text-primary display-6 fw-bold">$870.00</strong>
    <del class="ms-2">$940.00</del>
  </div>

  <!-- Product Description -->
  <p>Justo, cum feugiat imperdiet nulla molestie ac vulputate scelerisque amet. 
     Bibendum adipiscing platea blandit sit sed quam semper rhoncus.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 3: Add Product Options (Color & Size) 

<div class="cart-wrap py-5">
  <!-- Color Options -->
  <div class="color-options product-select">
    <div class="color-toggle" data-option-index="0">
      <h6 class="item-title text-uppercase text-dark">Color:</h6>
      <ul class="select-list list-unstyled d-flex">
        <li class="select-item pe-3" data-val="Green">
          <a href="#" class="btn btn-light active">Green</a>
        </li>
        <li class="select-item pe-3" data-val="Orange">
          <a href="#" class="btn btn-light">Orange</a>
        </li>
        <li class="select-item pe-3" data-val="Red">
          <a href="#" class="btn btn-light">Red</a>
        </li>
        <li class="select-item" data-val="Black">
          <a href="#" class="btn btn-light disabled">Black</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Size Options -->
  <div class="swatch product-select mt-3" data-option-index="1">
    <h6 class="item-title text-uppercase text-dark">Size:</h6>
    <ul class="select-list list-unstyled d-flex">
      <li data-value="S" class="select-item pe-3">
        <a href="#" class="btn btn-light">XL</a>
      </li>
      <li data-value="M" class="select-item pe-3">
        <a href="#" class="btn btn-light">L</a>
      </li>
      <li data-value="L" class="select-item pe-3">
        <a href="#" class="btn btn-light">M</a>
      </li>
      <li data-value="XL" class="select-item">
        <a href="#" class="btn btn-light">S</a>
      </li>
    </ul>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 4: Create Quantity Selector and Add to Cart 

<div class="product-quantity pt-3">
  <div class="stock-number text-dark">
    <em>2 in stock</em>
  </div>
  <div class="stock-button-wrap">
    <!-- Quantity Input with Plus/Minus Buttons -->
    <div class="input-group product-qty" style="max-width: 150px;">
      <span class="input-group-btn">
        <button type="button" class="quantity-left-minus btn btn-light btn-number" data-type="minus">
          <svg width="16" height="16">
            <use xlink:href="#minus"></use>
          </svg>
        </button>
      </span>
      <input type="text" id="quantity" name="quantity" 
             class="form-control input-number text-center" 
             value="1" min="1" max="100">
      <span class="input-group-btn">
        <button type="button" class="quantity-right-plus btn btn-light btn-number" data-type="plus">
          <svg width="16" height="16">
            <use xlink:href="#plus"></use>
          </svg>
        </button>
      </span>
    </div>

    <!-- Action Buttons -->
    <div class="qty-button d-flex flex-wrap pt-3">
      <button type="submit" class="btn btn-primary py-3 px-4 text-uppercase me-3 mt-3">
        Buy now
      </button>
      <button type="submit" name="add-to-cart" class="btn btn-dark py-3 px-4 text-uppercase mt-3">
        Add to cart
      </button>                      
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

JavaScript for Quantity Selector 

// Quantity plus/minus functionality
$(document).ready(function() {
  $('.btn-number').click(function(e) {
    e.preventDefault();

    var fieldName = $(this).attr('data-field');
    var type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseInt(input.val());

    if (!isNaN(currentVal)) {
      if (type == 'minus') {
        if (currentVal > input.attr('min')) {
          input.val(currentVal - 1).change();
        }
      } else if (type == 'plus') {
        if (currentVal < input.attr('max')) {
          input.val(currentVal + 1).change();
        }
      }
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

Step 5: Add Product Metadata 

<div class="meta-product py-2">
  <!-- SKU -->
  <div class="meta-item d-flex align-items-baseline">
    <h6 class="item-title no-margin pe-2">SKU:</h6>
    <ul class="select-list list-unstyled d-flex">
      <li class="select-item">1223</li>
    </ul>
  </div>

  <!-- Category -->
  <div class="meta-item d-flex align-items-baseline">
    <h6 class="item-title no-margin pe-2">Category:</h6>
    <ul class="select-list list-unstyled d-flex">
      <li class="select-item">
        <a href="#">Watch</a>,
      </li>
      <li class="select-item">
        <a href="#">Screen touch</a>,
      </li>
    </ul>
  </div>

  <!-- Tags -->
  <div class="meta-item d-flex align-items-baseline">
    <h6 class="item-title no-margin pe-2">Tags:</h6>
    <ul class="select-list list-unstyled d-flex">
      <li class="select-item">
        <a href="#">Classic</a>,
      </li>
      <li class="select-item">
        <a href="#">Modern</a>
      </li>
    </ul>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 6: Create Tabbed Information Section 

<section class="product-info-tabs py-5">
  <div class="container-fluid">
    <div class="row">
      <div class="d-flex flex-column flex-md-row align-items-start gap-5">

        <!-- Tab Navigation -->
        <div class="nav flex-row flex-wrap flex-md-column nav-pills me-3 col-lg-3" 
             id="v-pills-tab" role="tablist">
          <button class="nav-link text-start active" id="v-pills-description-tab" 
                  data-bs-toggle="pill" data-bs-target="#v-pills-description" 
                  type="button" role="tab">Description</button>
          <button class="nav-link text-start" id="v-pills-additional-tab" 
                  data-bs-toggle="pill" data-bs-target="#v-pills-additional" 
                  type="button" role="tab">Additional Information</button>
          <button class="nav-link text-start" id="v-pills-reviews-tab" 
                  data-bs-toggle="pill" data-bs-target="#v-pills-reviews" 
                  type="button" role="tab">Customer Reviews</button>
        </div>

        <!-- Tab Content -->
        <div class="tab-content" id="v-pills-tabContent">
          <!-- Description Tab -->
          <div class="tab-pane fade show active" id="v-pills-description" 
               role="tabpanel" tabindex="0">
            <h5>Product Description</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
               Donec odio. Quisque volutpat mattis eros.</p>
            <ul class="list-unstyled ps-4">
              <li>• Donec nec justo eget felis facilisis fermentum.</li>
              <li>• Suspendisse urna viverra non, semper suscipit pede.</li>
              <li>• Aliquam porttitor mauris sit amet orci.</li>
            </ul>
          </div>

          <!-- Additional Info Tab -->
          <div class="tab-pane fade" id="v-pills-additional" 
               role="tabpanel" tabindex="0">
            <p>It is Comfortable and Best</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse 
               cillum dolore eu fugiat nulla pariatur.</p>
          </div>

          <!-- Reviews Tab -->
          <div class="tab-pane fade" id="v-pills-reviews" 
               role="tabpanel" tabindex="0">
            <!-- Review content goes here -->
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

Step 7: Add Customer Reviews Section 

<div class="review-box d-flex flex-wrap">
  <!-- Individual Review -->
  <div class="col-lg-6 d-flex flex-wrap gap-3">
    <div class="col-md-2">
      <div class="image-holder">
        <img src="images/reviewer-1.jpg" alt="review" class="img-fluid rounded-circle">
      </div>
    </div>
    <div class="col-md-8">
      <div class="review-content">
        <!-- Review Rating -->
        <div class="rating-container d-flex align-items-center">
          <div class="rating"><svg width="24" height="24" class="text-primary">
            <use xlink:href="#star-solid"></use></svg>
          </div>
          <!-- Add more stars -->
          <span class="rating-count">(3.5)</span>
        </div>
        <div class="review-header">
          <span class="author-name">Tina Johnson</span>
          <span class="review-date">– 03/07/2023</span>
        </div>
        <p>Vitae tortor condimentum lacinia quis vel eros donec ac.</p>
      </div>
    </div>
  </div>
</div>

<!-- Add Review Form -->
<div class="add-review mt-5">
  <h3>Add a review</h3>
  <form id="form" class="form-group">
    <div class="pb-3">
      <label>Your Review *</label>
      <textarea class="form-control" placeholder="Write your review here"></textarea>
    </div>
    <div class="pb-3">
      <label>Your Name *</label>
      <input type="text" name="name" placeholder="Write your name here" class="form-control">
    </div>
    <div class="pb-3">
      <label>Your Email *</label>
      <input type="email" name="email" placeholder="Write your email here" class="form-control">
    </div>
    <button type="submit" class="btn btn-dark btn-large text-uppercase w-100">
      Submit
    </button>
  </form>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 8: Create Related Products Carousel 

<section id="related-products" class="product-store position-relative py-5">
  <div class="container-fluid">
    <div class="section-header d-flex justify-content-between my-5">
      <h2 class="section-title">Related Products</h2>
      <div class="d-flex align-items-center">
        <div class="swiper-buttons">
          <button class="swiper-prev products-carousel-prev btn btn-primary">❮</button>
          <button class="swiper-next products-carousel-next btn btn-primary">❯</button>
        </div>  
      </div>
    </div>

    <div class="products-carousel swiper">
      <div class="swiper-wrapper">
        <!-- Product Card -->
        <div class="product-item swiper-slide">
          <a href="#" class="btn-wishlist">
            <svg width="24" height="24"><use xlink:href="#heart"></use></svg>
          </a>
          <figure>
            <a href="product-single.html">
              <img src="images/thumb-tomatoes.png" class="tab-image">
            </a>
          </figure>
          <h3>Sunstar Fresh Melon Juice</h3>
          <span class="qty">1 Unit</span>
          <span class="price">$18.00</span>
          <div class="d-flex align-items-center justify-content-between">
            <div class="input-group product-qty">
              <!-- Quantity selector -->
            </div>
            <a href="#" class="nav-link">Add to Cart</a>
          </div>
        </div>
        <!-- Add more product items -->
      </div>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

JavaScript for Related Products Carousel 

var productsCarousel = new Swiper('.products-carousel', {
  loop: true,
  slidesPerView: 1,
  spaceBetween: 20,
  navigation: {
    nextEl: '.products-carousel-next',
    prevEl: '.products-carousel-prev',
  },
  breakpoints: {
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 },
  }
});
Enter fullscreen mode Exit fullscreen mode

Complete Bootstrap Dependencies

Make sure to include these at the bottom of your HTML:

<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Custom Scripts -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
Enter fullscreen mode Exit fullscreen mode

Key Bootstrap Classes Used

Class Purpose
container-fluid Full-width container
row / col-* Grid system for responsive layout
g-5 Global gutter spacing
d-flex / flex-column Flexbox utilities
btn / btn-primary / btn-dark Button styling
form-control Form input styling
input-group Grouped form controls
nav-pills Tab navigation styling
tab-pane / fade Tab content with transitions
badge / rounded-pill Badge components
swiper Carousel/slider container

Summary

This tutorial walked through creating a complete Bootstrap product detail page based on the FoodMart template. The key components covered include:

  1. Product image gallery with thumbnail synchronization using Swiper
  2. Product information including title, price, rating, and description
  3. Product options for color and size selection
  4. Quantity selector with plus/minus controls
  5. Tabbed information for descriptions, specs, and reviews
  6. Customer reviews section with add review form
  7. Related products carousel for cross-selling

The template demonstrates how Bootstrap 5's grid system, components, and utilities combine with Swiper for a professional e-commerce product page that's fully responsive and user-friendly.

You can find tons of Free Ecommerce HTML Templates that you can use in your Web projects. Do check them out!

Top comments (0)