Cards Bootstrap 5Free+ CSS
Easily compare and select your perfect plan with vibrant animations and clear trust indicators.
0 views0 downloads
gosnippets.com/preview/sunset-orchid-pricing-plans-with-dynamic-trust-signals
Easily compare and select your perfect plan with vibrant animations and clear trust indicators.
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-card">
6 <div class="gs-card-inner p-4">
7 <h2 class="text-center mb-4">Choose Your Plan</h2>
8 <div class="row row-cols-1 row-cols-md-3 g-4">
9 <div class="col">
10 <div class="card gs-tile">
11 <div class="card-body text-center">
12 <h5 class="card-title">Basic</h5>
13 <p class="card-text">Perfect for individuals</p>
14 <h3>$10/mo</h3>
15 <p class="text-muted">Billed annually</p>
16 <button class="btn gs-btn" type="button">Select</button>
17 </div>
18 <div class="gs-badge">
19 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle">
20 <path d="M16 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM6.173 11.672l7.073-7.072L11.127 2.6 5.354 8.373l-2.12-2.12-1.415 1.415 3.535 3.535z"></path>
21 </svg>
22 Best Value
23 </div>
24 </div>
25 </div>
26 <div class="col">
27 <div class="card gs-tile">
28 <div class="card-body text-center">
29 <h5 class="card-title">Standard</h5>
30 <p class="card-text">For Small Teams</p>
31 <h3>$25/mo</h3>
32 <p class="text-muted">Billed annually</p>
33 <button class="btn gs-btn" type="button">Select</button>
34 </div>
35 <div class="gs-badge gs-popular">
36 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill">
37 <path d="M3.612 15.443A.5.5 0 0 1 3 15V7.59L.278 5.573a.5.5 0 0 1 .577-.816l3.086 1.975 1.16-3.583a.5.5 0 0 1 .924 0l1.16 3.583 3.086-1.975a.5.5 0 0 1 .577.816L10 7.59v7.409a.5.5 0 0 1-.61.497l-6.778-1.491z"></path>
38 </svg>
39 Most Popular
40 </div>
41 </div>
42 </div>
43 <div class="col">
44 <div class="card gs-tile">
45 <div class="card-body text-center">
46 <h5 class="card-title">Premium</h5>
47 <p class="card-text">For Large Enterprises</p>
48 <h3>$50/mo</h3>
49 <p class="text-muted">Billed annually</p>
50 <button class="btn gs-btn" type="button">Select</button>
51 </div>
52 <div class="gs-badge">
53 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trophy">
54 <path d="M8 0a2 2 0 0 0-2 2h-.5a1.5 1.5 0 0 0-1.415 1H1v2a1 1 0 0 0 1 1h.078A5.971 5.971 0 0 0 3 7.165V8c0 .279.238.51.556.563l2.574.258a1 1 0 0 0 .87-.563h.328a1 1 0 0 0 .87.563l2.574-.258A.572.572 0 0 0 13 8v-.835a5.971 5.971 0 0 0 .922-2.835H15a1 1 0 0 0 1-1V3h-3.085a1.5 1.5 0 0 0-1.415-1H10a2 2 0 0 0-2-2zM2 3h1a.5.5 0 0 1 .5.5V5a.5.5 0 0 1-.5.5H2V3zm12 2h-1a.5.5 0 0 1-.5-.5V3.5A.5.5 0 0 1 14 3h1v2z"></path>
55 </svg>
56 Top Class
57 </div>
58 </div>
59 </div>
60 </div>
61 </div>
62 </div>
63</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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.