Bootstrap 5 E-commerce Navigation with Product Cards
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;800&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif
}
body {
background-color: #f2eae3
}
.name {
font-size: 16px;
color: #e83d16 !important;
font-weight: 500
}
.navbar-toggler {
font-size: 15px
}
.nav-link {
font-size: 14px;
color: #000 !important;
font-weight: bold;
margin-left: 40px
}
.form-control {
height: 32px;
width: 100%;
border-radius: 20px;
color: #c7c6cb;
font-size: 13px;
border: none
}
.searchitem {
position: relative
}
.searchitem i {
position: absolute;
right: 18px;
top: 10px;
font-size: 13px
}
.btn {
height: 35px;
width: 170px;
border: none;
border-radius: 20px;
background-color: #633a9c;
font-size: 14px;
font-weight: 500
}
.text {
font-size: 23px;
font-weight: bold
}
.card {
height: 130px;
overflow: hidden;
border: none;
border-radius: 15px
}
.imagename {
font-size: 14px;
font-weight: bold
}
</style>
</head>
<body>
<div class="container">
<div class="d-flex justify-content-center align-items-center mt-5"> <button class="btn btn-dark">OUR
CATEGORIES</button> </div>
<div class="d-flex justify-content-center mt-3"> <span class="text text-center">Finding Best Products Now<br> in
Your Fingertips</span> </div>
<div class="row mt-2 g-4">
<div class="col-md-3">
<div class="card p-1">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Mobile</span> <span>Phones</span> </div>
<div> <img src="https://i.imgur.com/b9zkoz0.jpg" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Head</span> <span>Phones</span> </div>
<div> <img src="https://i.imgur.com/SHWASPG.png" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Smart</span> <span>Watches</span> </div>
<div> <img src=" https://i.imgur.com/Ya0OXCv.png" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Air</span> <span>Purifiers</span> </div>
<div> <img src="https://i.imgur.com/2gvGwbh.png" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2tr5">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Vacuum</span> <span>Cleaners</span> </div>
<div> <img src="https://i.imgur.com/UMQJpSG.png" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Washing</span> <span>Machines</span> </div>
<div> <img src="https://i.imgur.com/e9CyhXR.png" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Smart</span> <span>Televisions</span> </div>
<div> <img src=" https://i.imgur.com/Zq8VigZ.png" height="100" width="100" /> </div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card p-2">
<div class="d-flex justify-content-between align-items-center p-2">
<div class="flex-column lh-1 imagename"> <span>Laptops</span> </div>
<div> <img src="https://i.imgur.com/6pK5oZl.jpg" height="100" width="100" /> </div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Bootstrap 5 snippet provides a clean and functional e-commerce navigation component with product cards. It offers a user-friendly way to organize and display your products, making it easy for customers to browse and find what they're looking for. The navigation is designed to be responsive and customizable, ensuring a seamless shopping experience across different devices.
Key Features:
- Responsive Design: The navigation adapts seamlessly to various screen sizes, providing a consistent user experience on desktops, tablets, and mobile devices.
- Product Cards: Display your products in visually appealing cards, including product images, titles, descriptions, and prices.
- Customizable Styling: Easily modify the appearance of the navigation and product cards using Bootstrap's CSS classes to match your website's design.
Implementation:
- Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the navigation component, including the container, product card grid, and filtering options.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the navigation, product cards, and other elements, such as nav, nav-item, nav-link, card, card-img-top, card-body, and btn.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
