Enhanced Product Detail - Copy this Html, Bootstrap Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Product-Details</title>-<link-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"-rel="stylesheet">-</head>-<body>-<div-class="container-py-4">-<nav-aria-label="breadcrumb">-<ol-class="breadcrumb">-<li-class="breadcrumb-item"><a-href="#">Home</a></li>-<li-class="breadcrumb-item"><a-href="#">Products</a></li>-<li-class="breadcrumb-item-active">Premium-Leather-Watch</li>-</ol>-</nav>-<div-class="row-g-4">-<div-class="col-md-6">-<div-class="card-h-100">-<img-src="https://images.unsplash.com/photo-1524805444758-089113d48a6d"-class="card-img-top"-alt="Premium-Leather-Watch">-<div-class="card-body">-<div-class="row-g-3">-<div-class="col-12-mb-3">-<span-class="badge-bg-success">Active</span>-<span-class="badge-bg-warning">Featured</span>-<span-class="badge-bg-danger">Hot</span>-</div>-<div-class="col-6">-<small-class="text-muted">Product-Code</small>-<p-class="mb-0">WATCH001</p>-</div>-<div-class="col-6">-<small-class="text-muted">Category</small>-<p-class="mb-0">Accessories</p>-</div>-</div>-</div>-</div>-</div>-<div-class="col-md-6">-<div-class="card-h-100">-<div-class="card-body">-<h2-class="card-title">Premium-Leather-Watch</h2>-<p-class="text-muted-mb-4">premium-leather-watch</p>-<div-class="price-box-mb-4">-<h3-class="text-primary-mb-0">$199.99</h3>-<small-class="text-decoration-line-through-text-muted">$249.99</small>-</div>-<p-class="card-text">Luxurious-leather-watch-with-premium-craftsmanship-and-elegant-design.</p>-<div-class="row-g-3-mb-4">-<div-class="col-6">-<small-class="text-muted">Stock</small>-<p-class="mb-0">50-units</p>-</div>-<div-class="col-6">-<small-class="text-muted">SKU</small>-<p-class="mb-0">WTC-PRM-001</p>-</div>-</div>-</div>-</div>-</div>-<div-class="col-12">-<div-class="card">-<div-class="card-header">-<h3-class="mb-0">Product-Variants</h3>-</div>-<div-class="card-body">-<div-class="table-responsive">-<table-class="table">-<thead>-<tr>-<th>SKU</th>-<th>Variant</th>-<th>Price</th>-<th>Stock</th>-</tr>-</thead>-<tbody>-<tr>-<td>WTC-BRN-001</td>-<td>Brown-Leather</td>-<td>$199.99</td>-<td>20</td>-</tr>-<tr>-<td>WTC-BLK-001</td>-<td>Black-Leather</td>-<td>$199.99</td>-<td>30</td>-</tr>-</tbody>-</table>-</div>-</div>-</div>-</div>-<div-class="col-12">-<div-class="card">-<div-class="card-header">-<h3-class="mb-0">Additional-Images</h3>-</div>-<div-class="card-body">-<div-class="row-g-3">-<div-class="col-6-col-md-3">-<img-src="https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3"-class="img-fluid-rounded"-alt="Watch-Image-1">-</div>-<div-class="col-6-col-md-3">-<img-src="https://images.unsplash.com/photo-1589666564459-93cdd3ab856a"-class="img-fluid-rounded"-alt="Watch-Image-2">-</div>-<div-class="col-6-col-md-3">-<img-src="https://images.unsplash.com/photo-1542496658-e33a6d0d50f6"-class="img-fluid-rounded"-alt="Watch-Image-3">-</div>-<div-class="col-6-col-md-3">-<img-src="https://images.unsplash.com/photo-1639037970802-cf1c462305d4"-class="img-fluid-rounded"-alt="Watch-Image-4">-</div>-</div>-</div>-</div>-</div>-<div-class="col-12-text-end">-<a-href="#"-class="btn-btn-secondary-me-2">Back-to-List</a>-<a-href="#"-class="btn-btn-warning">Edit-Product</a>-</div>-</div>-</div>-<script-src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>-</body>-</html>-sửa-giao-diện-này-đẹp-hơn
