Here’s a guide to help you create a visually appealing and functional Bootstrap 5 Product Card Template. We will walk through the necessary HTML and CSS to construct a responsive product card layout using Bootstrap’s grid system and utility classes.
Adding Bootstrap CSS
First, you need to include the Bootstrap CSS in the `head` section of your HTML document. This will allow you to utilize Bootstrap’s pre-defined classes and components.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css'>
Creating the HTML Structure
The core of the product card lies in its HTML structure. We’ll utilize Bootstrap’s grid system to ensure responsiveness across different screen sizes. Here’s the basic HTML structure:
<div class="container-fluid bg-trasparent my-4 p-3" style="position: relative">
<div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col hp">
<div class="card h-100 shadow-sm">
<a target="_blank" href="https://amzn.to/3qeS1Fe">
<img src="https://m.media-amazon.com/images/I/81gK08T6tYL._AC_SL1500_.jpg" class="card-img-top" alt="product.title" />
</a>
<div class="label-top shadow-sm">
<a class="text-white" target="_blank" href="https://amzn.to/3qeS1Fe">asus</a>
</div>
<div class="card-body">
<div class="clearfix mb-3">
<span class="float-start badge rounded-pill bg-success">1.245{{HTML_CODE}}lt;/span>
<span class="float-end"><a href="#" class="small text-muted text-uppercase aff-link">reviews</a></span>
</div>
<h5 class="card-title">
<a target="_blank" href="#">ASUS TUF FX505DT Gaming Laptop- 15.6", 120Hz Full HD, AMD Ryzen 5 R5-3550H Processor, GeForce GTX 1650 Graphics, 8GB DDR4, 256GB PCIe SSD, RGB Keyboard, Windows 10 64-bit - FX505DT-AH51</a>
</h5>
<div class="d-grid gap-2 my-4">
<a href="#" class="btn btn-warning bold-btn">add to cart</a>
</div>
<div class="clearfix mb-1">
<span class="float-start"><a href="#"><i class="fas fa-question-circle"></i></a></span>
<span class="float-end">
<i class="far fa-heart" style="cursor: pointer"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col hp">
<div class="card h-100 shadow-sm">
<a href="https://amzn.to/42dsdGC" target="_blank">
<img src="https://m.media-amazon.com/images/I/71wF7YDIQkL._AC_SL1500_.jpg" class="card-img-top" alt="product.title" />
</a>
<div class="label-top shadow-sm">
<a class="text-white" href="https://amzn.to/42dsdGC" target="_blank">razer</a>
</div>
<div class="card-body">
<div class="clearfix mb-3">
<span class="float-start badge rounded-pill bg-success">2.345{{HTML_CODE}}lt;/span>
<span class="float-end"><a href="#" class="small text-muted text-uppercase aff-link">reviews</a></span>
</div>
<h5 class="card-title">
<a target="_blank" href="#">Razer Blade 15 Base Gaming Laptop 2020: Intel Core i7-10750H 6-Core, NVIDIA GeForce GTX 1660 Ti, 15.6" FHD 1080p 120Hz, 16GB RAM, 256GB SSD, CNC Aluminum, Chroma RGB Lighting, Black</a>
</h5>
<div class="d-grid gap-2 my-4">
<a href="#" class="btn btn-warning bold-btn">add to cart</a>
</div>
<div class="clearfix mb-1">
<span class="float-start"><a href="#"><i class="fas fa-question-circle"></i></a></span>
<span class="float-end">
<i class="far fa-heart" style="cursor: pointer"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col hp">
<div class="card h-100 shadow-sm">
<a href="https://amzn.to/3os2Nrc" target="_blank">
<img src="https://m.media-amazon.com/images/I/81w+3k4U8PL._AC_SL1500_.jpg" class="card-img-top" alt="product.title" />
</a>
<div class="label-top shadow-sm">
<a class="text-white" href="https://amzn.to/3os2Nrc" target="_blank">lenovo</a>
</div>
<div class="card-body">
<div class="clearfix mb-3">
<span class="float-start badge rounded-pill bg-success">1.020{{HTML_CODE}}lt;/span>
<span class="float-end"><a href="#" class="small text-muted text-uppercase aff-link">reviews</a></span>
</div>
<h5 class="card-title">
<a target="_blank" href="#">Lenovo Legion 5 Gaming Laptop, 15.6" FHD (1920x1080) IPS Screen, AMD Ryzen 7 4800H Processor, 16GB DDR4, 512GB SSD, NVIDIA GTX 1660Ti, Windows 10, 82B1000AUS, Phantom Black</a>
</h5>
<div class="d-grid gap-2 my-4">
<a href="#" class="btn btn-warning bold-btn">add to cart</a>
</div>
<div class="clearfix mb-1">
<span class="float-start"><a href="#"><i class="fas fa-question-circle"></i></a></span>
<span class="float-end">
<i class="far fa-heart" style="cursor: pointer"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col hp">
<div class="card h-100 shadow-sm">
<a href="https://amzn.to/43tMNDW" target="_blank">
<img src="https://m.media-amazon.com/images/I/61Ze2wc9nyS._AC_SL1500_.jpg" class="card-img-top" alt="product.title" />
</a>
<!-- <div class="label-top shadow-sm">Asus Rog</div> -->
<div class="label-top shadow-sm">
<a class="text-white" href="https://amzn.to/43tMNDW" target="_blank">msi</a>
</div>
<div class="card-body">
<div class="clearfix mb-3">
<span class="float-start badge rounded-pill bg-success">2.245{{HTML_CODE}}lt;/span>
<span class="float-end"><a href="#" class="small text-muted text-uppercase aff-link">reviews</a></span>
</div>
<h5 class="card-title">
<a target="_blank" href="#">MSI GL66 Gaming Laptop: 15.6" 144Hz FHD 1080p Display, Intel Core i7-11800H, NVIDIA GeForce RTX 3070, 16GB, 512GB SSD, Win10, Black (11UGK-001)</a>
</h5>
<div class="d-grid gap-2 my-4">
<a href="#" class="btn btn-warning bold-btn">add to cart</a>
</div>
<div class="clearfix mb-1">
<span class="float-start"><a href="#"><i class="fas fa-question-circle"></i></a></span>
<span class="float-end">
<i class="far fa-heart" style="cursor: pointer"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="small text-muted my-4">Images by <a target="_blank" href="https://www.amazon.com/">Amazon</a></div>
Styling with CSS
To enhance the visual appeal of the product card, we’ll add custom CSS styles. This includes defining colors, fonts, and adjusting the layout.
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
:root {
--font1: 'Heebo', sans-serif;
--font2: 'Fira Sans Extra Condensed', sans-serif;
--font3: 'Roboto', sans-serif;
--btnbg: #ffcc00;
--btnfontcolor: rgb(61, 61, 61);
--btnfontcolorhover: rgb(255, 255, 255);
--btnbghover: #ffc116;
--btnactivefs: rgb(241, 195, 46);
--label-index: #960796;
--danger-index: #5bc257;
/* PAGINATE */
--link-color: #000;
--link-color-hover: #fff;
--bg-content-color: #ffcc00;
}
.container-fluid {
max-width: 1400px;
}
.card {
background: #fff;
box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
border: 0;
border-radius: 1rem;
}
.card-img,
.card-img-top {
border-top-left-radius: calc(1rem - 1px);
border-top-right-radius: calc(1rem - 1px);
}
.card h5 {
overflow: hidden;
height: 55px;
font-weight: 300;
font-size: 1rem;
}
.card h5 a {
color: black;
text-decoration: none;
}
.card-img-top {
width: 100%;
min-height: 250px;
max-height: 250px;
object-fit: contain;
padding: 30px;
}
.card h2 {
font-size: 1rem;
}
.card:hover {
transform: scale(1.02);
box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}
/* Centered text */
.label-top {
position: absolute;
background-color: var(--label-index);
color: #fff;
top: 8px;
right: 8px;
padding: 5px 10px 5px 10px;
font-size: .7rem;
font-weight: 600;
border-radius: 3px;
text-transform: uppercase;
}
.top-right {
position: absolute;
top: 24px;
left: 24px;
width: 90px;
height: 90px;
border-radius: 50%;
font-size: 1rem;
font-weight: 900;
background: #8bc34a;
line-height: 90px;
text-align: center;
color: white;
}
.top-right span {
display: inline-block;
vertical-align: middle;
/* line-height: normal; */
/* padding: 0 25px; */
}
.aff-link {
/* text-decoration: overline; */
font-weight: 500;
}
.over-bg {
background: rgba(53, 53, 53, 0.85);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(0.0px);
-webkit-backdrop-filter: blur(0.0px);
border-radius: 10px;
}
.bold-btn {
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
padding: 5px 50px 5px 50px;
}
.box .btn {
font-size: 1.5rem;
}
@media (max-width: 1025px) {
.btn {
padding: 5px 40px 5px 40px;
}
}
@media (max-width: 250px) {
.btn {
padding: 5px 30px 5px 30px;
}
}
/* START BUTTON */
.btn-warning {
background: var(--btnbg);
color: var(--btnfontcolor);
fill: #ffffff;
border: none;
text-decoration: none;
outline: 0;
/* box-shadow: -1px 6px 19px rgba(247, 129, 10, 0.25); */
border-radius: 100px;
}
.btn-warning:hover {
background: var(--btnbghover);
color: var(--btnfontcolorhover);
/* box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35); */
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
background: var(--btnbghover);
color: var(--btnfontcolorhover);
/* box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35); */
}
.btn-warning:active:focus {
box-shadow: 0 0 0 0.25rem var(--btnactivefs);
}
.btn-warning:active {
background: var(--btnbghover);
color: var(--btnfontcolorhover);
/* box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35); */
}
/* END BUTTON */
.bg-success {
font-size: 1rem;
background-color: var(--btnbg)!important;
color: var(--btnfontcolor)!important;
}
.bg-danger {
font-size: 1rem;
}
.price-hp {
font-size: 1rem;
font-weight: 600;
color: darkgray;
}
.amz-hp {
font-size: .7rem;
font-weight: 600;
color: darkgray;
}
.fa-question-circle:before {
/* content: "\f059"; */
color: darkgray;
}
.fa-heart:before {
color:crimson;
}
.fa-chevron-circle-right:before {
color: darkgray;
}
With these steps, you’ve successfully created a visually appealing and responsive Bootstrap Product Card Template. Feel free to customize the HTML and CSS further to match your specific requirements.
