Engage with dynamic content featuring a cinematic share sheet and interactive engagement rail. Dive into a seamless social experience enhanced with mesmerizing animations and gradients.
1
2<section class="gs-stage">
3 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5 <div class="gs-grid-overlay" aria-hidden="true"></div>
6 <div class="gs-card">
7 <div class="gs-card-inner">
8 <div class="d-flex align-items-center mb-3">
9
10 <div>
11 <h5 class="mb-0">Eva Carter</h5>
12 <small class="text-muted">10:24 AM · Oct 24, 2023</small>
13 </div>
14 </div>
15 <p class="mb-4">Exploring the serene Nordic landscapes while embracing the seamless integration of nature and design.</p>
16 <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
17 <button class="btn-like">
18 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
19 <path stroke="var(--text)" stroke-width="1.5" d="M12 21l-1.454-1.348C6.321 15.617 4 12.744 4 9.5 4 7.015 5.989 5 8.5 5c1.5 0 3 .75 4.5 2.25C14 5.75 15.5 5 17 5c2.5 0 4.5 2.015 4.5 4.5 0 3.244-2.321 6.117-6.546 10.152L12 21z"></path>
20 </svg>
21 </button>
22 <button class="btn-share">
23 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
24 <path stroke="var(--text)" stroke-width="1.5" d="M12 5l7 8-7 8"></path>
25 <path fill="var(--text)" d="M12 5h8v2h-8zm0 16h8v2h-8z"></path>
26 </svg>
27 </button>
28 </div>
29 <div class="share-sheet">
30 <button class="btn btn-outline-light">Facebook</button>
31 <button class="btn btn-outline-light">Twitter</button>
32 <button class="btn btn-outline-light">LinkedIn</button>
33 </div>
34 </div>
35 </div>
36</section>
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.
27
Components
151
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.