Elevate your social interactions with a feed card featuring interactive engagement options, stylish share sheet, and vibrant neon accents.
1<section class="gs-stage">
2 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4 <div class="gs-card">
5 <div class="gs-card-inner">
6 <header class="gs-feed-header d-flex align-items-center">
7 <svg width="24" height="24" fill="currentColor">
8 <circle></circle>
9 <line></line>
10 <circle></circle>
11 </svg>
12 <div class="ms-3">
13 <h5 class="mb-0">Galaxy Explorer</h5>
14 <small>25 October 2023</small>
15 </div>
16 </header>
17 <div class="gs-feed-content mt-4">
18 <p>Exploring the endless expanse of the cosmos. Today we venture further than ever, unlocking the mysteries of space.</p>
19 </div>
20 <div class="gs-feed-engagement mt-3 d-flex justify-content-between">
21 <button class="btn btn-engage">
22 <svg width="24" height="24" fill="currentColor">
23 <line></line>
24 <polyline></polyline>
25 </svg>
26 Comment
27 </button>
28 <button class="btn btn-engage">
29 <svg width="24" height="24" fill="currentColor">
30 <line></line>
31 <line></line>
32 </svg>
33 Share
34 </button>
35 <div class="gs-share-sheet position-relative d-inline-block">
36 <button class="btn btn-engage">
37 <svg width="24" height="24" fill="currentColor">
38 <circle></circle>
39 <line></line>
40 </svg>
41 Like
42 </button>
43 <div class="gs-share-options position-absolute">
44 <button class="btn btn-share-option">Twitter</button>
45 <button class="btn btn-share-option">Facebook</button>
46 <button class="btn btn-share-option">LinkedIn</button>
47 </div>
48 </div>
49 </div>
50 </div>
51 </div>
52</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
129
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.