Ecommerce Products View Template design using Html CSS and Bootstrap
Ecommerce Products View Template design using Bootstrap 5
How to make an eCommerce Product View design template using Html CSS and Bootstrap 5
In this post, you will be learning how to make customized Product View design for e-commerce using HTML, CSS, and Bootstrap 5.
View:
Now, To achieve the above design for the Ecommerce Product View Template follow the below steps.
Step 1: Write basic HTML 5 template in index.html and link style.css file to the index.html file.
index.html Page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ecommerce Product View Design</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="py-3 py-md-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-5 mt-3">
<div class="bg-white border">
<img src="hp-laptop.jpg" class="w-100" alt="Img">
</div>
</div>
<div class="col-md-7 mt-3">
<div class="product-view">
<h4 class="product-name">
HP Laptop 15IQasd54
<label class="label-stock bg-success">In Stock</label>
</h4>
<hr>
<p class="product-path">
Home / Category / Product / HP Laptop
</p>
<div>
<span class="selling-price">$399</span>
<span class="original-price">$499</span>
</div>
<div class="mt-2">
<div class="input-group">
<span class="btn btn1"><i class="fa fa-minus"></i></span>
<input type="text" value="1" class="input-quantity" />
<span class="btn btn1"><i class="fa fa-plus"></i></span>
</div>
</div>
<div class="mt-2">
<a href="" class="btn btn1"> <i class="fa fa-shopping-cart"></i> Add To Cart</a>
<a href="" class="btn btn1"> <i class="fa fa-heart"></i> Add To Wishlist </a>
</div>
<div class="mt-3">
<h5 class="mb-0">Small Description</h5>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a ty
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<div class="card">
<div class="card-header bg-white">
<h4>Description</h4>
</div>
<div class="card-body">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 2: Create style.css file and link to the above index.html file and paste the below CSS code in style.css:
/* Product View */
.product-view .product-name{
font-size: 24px;
color: #2874f0;
}
.product-view .product-name .label-stock{
font-size: 13px;
padding: 4px 13px;
border-radius: 5px;
color: #fff;
box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
float: right;
}
.product-view .product-path{
font-size: 13px;
font-weight: 500;
color: #252525;
margin-bottom: 16px;
}
.product-view .selling-price{
font-size: 26px;
color: #000;
font-weight: 600;
margin-right: 8px;
}
.product-view .original-price{
font-size: 18px;
color: #937979;
font-weight: 400;
text-decoration: line-through;
}
.product-view .btn1{
border: 1px solid;
margin-right: 3px;
border-radius: 0px;
font-size: 14px;
margin-top: 10px;
}
.product-view .btn1:hover{
background-color: #2874f0;
color: #fff;
}
.product-view .input-quantity{
border: 1px solid #000;
margin-right: 3px;
font-size: 12px;
margin-top: 10px;
width: 58px;
outline: none;
text-align: center;
}
/* Product View */
Thanks for reading.