Sneaker Product Cards example with pure CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<main class="container">
2 <section class="card">
3 <div class="product-image">
4 <img src="https://i.ibb.co/cNWqxGx/red.png" alt="OFF-white Red Edition" draggable="false" />
5 </div>
6 <div class="product-info">
7 <h2>Nike X OFF-white</h2>
8 <p>The 10: Air Jordan 1 off-white - Chicago</p>
9 <div class="price">$999</div>
10 </div>
11 <div class="btn">
12 <button class="buy-btn">Buy Now</button>
13 <button class="fav">
14 <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
15 <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
16 </svg>
17 </button>
18 </div>
19 </section>
20 <section class="card card-blue">
21 <div class="product-image">
22 <img src="https://i.ibb.co/0JKpmgd/blue.png" alt="OFF-white Blue Edition" draggable="false" />
23 </div>
24 <div class="product-info">
25 <h2>Nike X OFF-white</h2>
26 <p>Air Jordan 1 Retro High "Off-White - UNC" sneakers</p>
27 <div class="price">$1599</div>
28 </div>
29 <div class="btn">
30 <button class="buy-btn">Buy Now</button>
31 <button class="fav">
32 <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
33 <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
34 </svg>
35 </button>
36 </div>
37 </section>
38</main>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your 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
48
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Manage your API keys seamlessly with this visually stunning UI. Enjoy claymorphic design and animated orbs that enhance the user experience.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.