Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
1<div class="container">
2 <nav class="navbar navbar-expand-lg navbar-light">
3 <div class="container-fluid"> <a class="navbar-brand name" href="gosnippets.com" target="_blank">GoSnippets</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
4 <div class="collapse navbar-collapse" id="navbarSupportedContent">
5 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
6 <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">About</a> </li>
7 <li class="nav-item"> <a class="nav-link" href="#">Categories</a> </li>
8 <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li>
9 <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
10 </ul>
11 <form class="d-flex searchitem"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <i class="fa fa-search"></i> </form>
12 </div>
13 </div>
14 </nav>
15 <div class="d-flex justify-content-center align-items-center mt-5"> <button class="btn btn-dark">OUR CATEGORIES</button> </div>
16 <div class="d-flex justify-content-center mt-3"> <span class="text text-center">Finding Best Products Now<br> in Your Fingertips</span> </div>
17 <div class="row mt-2 g-4">
18 <div class="col-md-3">
19 <div class="card p-1">
20 <div class="d-flex justify-content-between align-items-center p-2">
21 <div class="flex-column lh-1 imagename"> <span>Mobile</span> <span>Phones</span> </div>
22 <div> <img src="https://i.imgur.com/b9zkoz0.jpg" height="100" width="100" /> </div>
23 </div>
24 </div>
25 </div>
26 <div class="col-md-3">
27 <div class="card p-2">
28 <div class="d-flex justify-content-between align-items-center p-2">
29 <div class="flex-column lh-1 imagename"> <span>Head</span> <span>Phones</span> </div>
30 <div> <img src="https://i.imgur.com/SHWASPG.png" height="100" width="100" /> </div>
31 </div>
32 </div>
33 </div>
34 <div class="col-md-3">
35 <div class="card p-2">
36 <div class="d-flex justify-content-between align-items-center p-2">
37 <div class="flex-column lh-1 imagename"> <span>Smart</span> <span>Watches</span> </div>
38 <div> <img src=" https://i.imgur.com/Ya0OXCv.png" height="100" width="100" /> </div>
39 </div>
40 </div>
41 </div>
42 <div class="col-md-3">
43 <div class="card p-2">
44 <div class="d-flex justify-content-between align-items-center p-2">
45 <div class="flex-column lh-1 imagename"> <span>Air</span> <span>Purifiers</span> </div>
46 <div> <img src="https://i.imgur.com/2gvGwbh.png" height="100" width="100" /> </div>
47 </div>
48 </div>
49 </div>
50 <div class="col-md-3">
51 <div class="card p-2tr5">
52 <div class="d-flex justify-content-between align-items-center p-2">
53 <div class="flex-column lh-1 imagename"> <span>Vacuum</span> <span>Cleaners</span> </div>
54 <div> <img src="https://i.imgur.com/UMQJpSG.png" height="100" width="100" /> </div>
55 </div>
56 </div>
57 </div>
58 <div class="col-md-3">
59 <div class="card p-2">
60 <div class="d-flex justify-content-between align-items-center p-2">
61 <div class="flex-column lh-1 imagename"> <span>Washing</span> <span>Machines</span> </div>
62 <div> <img src="https://i.imgur.com/e9CyhXR.png" height="100" width="100" /> </div>
63 </div>
64 </div>
65 </div>
66 <div class="col-md-3">
67 <div class="card p-2">
68 <div class="d-flex justify-content-between align-items-center p-2">
69 <div class="flex-column lh-1 imagename"> <span>Smart</span> <span>Televisions</span> </div>
70 <div> <img src=" https://i.imgur.com/Zq8VigZ.png" height="100" width="100" /> </div>
71 </div>
72 </div>
73 </div>
74 <div class="col-md-3">
75 <div class="card p-2">
76 <div class="d-flex justify-content-between align-items-center p-2">
77 <div class="flex-column lh-1 imagename"> <span>Laptops</span> </div>
78 <div> <img src="https://i.imgur.com/6pK5oZl.jpg" height="100" width="100" /> </div>
79 </div>
80 </div>
81 </div>
82 </div>
83</div>
Responsive Sidebar Navigation for Dashboard
Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
Bootstrap Transparent navbar example
Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
Elastic Active Tab Animation snippet using only HTML & CSS
Free Bootstrap 5 navbar snippet — Elastic Active Tab Animation snippet using only HTML & CSS. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.