Cards Bootstrap 5Free+ CSS+ JS
Add a card to your UI with Premium Pricing Table. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
5.2k views1.5k downloads
gosnippets.com/preview/premium-pricing-table
Source Code
1<div class="gs-pricing">
2
3 <!-- ── Header ─────────────────────────────────────────────── -->
4 <div class="gs-pricing__header">
5 <span class="gs-pill-badge">✦ Transparent pricing</span>
6 <h2 class="gs-pricing__title">Simple, honest pricing</h2>
7 <p class="gs-pricing__subtitle">Start free. Upgrade when ready. Cancel anytime.</p>
8
9 <!-- Billing toggle -->
10 <div class="gs-billing-toggle">
11 <span class="gs-billing-label gs-billing-label--active" id="gs-monthly-lbl">Monthly</span>
12 <label class="gs-toggle" for="gs-bill-sw" aria-label="Toggle annual billing">
13 <input type="checkbox" id="gs-bill-sw" class="gs-toggle__input">
14 <span class="gs-toggle__track"><span class="gs-toggle__thumb"></span></span>
15 </label>
16 <span class="gs-billing-label" id="gs-annual-lbl">
17 Annual <span class="gs-save-chip">Save 20%</span>
18 </span>
19 </div>
20 </div>
21
22 <!-- ── Cards ──────────────────────────────────────────────── -->
23 <div class="row g-4 justify-content-center align-items-end px-2">
24
25 <!-- Starter -->
26 <div class="col-lg-4 col-md-6">
27 <div class="gs-card gs-card--starter">
28 <div class="gs-card__header">
29 <div class="gs-card__icon gs-card__icon--starter">
30 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"
31 viewBox="0 0 24 24" stroke-width="2" stroke="#4A90D9">
32 <path stroke-linecap="round" stroke-linejoin="round"
33 d="M3 10h11M9 21V3m5 14l3 3 5-5"/>
34 </svg>
35 </div>
36 <div>
37 <div class="gs-plan-name">Starter</div>
38 <div class="gs-plan-tag">Perfect to get started</div>
39 </div>
40 </div>
41 <div class="gs-price">
42 <sup class="gs-price__cur">$</sup>
43 <span class="gs-price__num" data-monthly="0" data-annual="0">0</span>
44 <span class="gs-price__per">/month</span>
45 </div>
46 <ul class="gs-features">
47 <li><span class="gs-check">✓</span> 3 projects</li>
48 <li><span class="gs-check">✓</span> 5 GB storage</li>
49 <li><span class="gs-check">✓</span> Community support</li>
50 <li class="gs-feat--off"><span class="gs-check gs-check--off">×</span> Custom domain</li>
51 <li class="gs-feat--off"><span class="gs-check gs-check--off">×</span> Analytics dashboard</li>
52 <li class="gs-feat--off"><span class="gs-check gs-check--off">×</span> Team collaboration</li>
53 </ul>
54 <a href="#" class="gs-btn gs-btn--starter">Get started free</a>
55 </div>
56 </div>
57
58 <!-- Pro -->
59 <div class="col-lg-4 col-md-6">
60 <div class="gs-card gs-card--pro">
61 <div class="gs-popular-badge">
62 <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11"
63 fill="currentColor" viewBox="0 0 16 16">
64 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
65 </svg>
66 Most Popular
67 </div>
68 <div class="gs-card__header">
69 <div class="gs-card__icon gs-card__icon--pro">
70 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"
71 viewBox="0 0 24 24" stroke-width="2" stroke="#fff">
72 <path stroke-linecap="round" stroke-linejoin="round"
73 d="M13 10V3L4 14h7v7l9-11h-7z"/>
74 </svg>
75 </div>
76 <div>
77 <div class="gs-plan-name gs-plan-name--lt">Pro</div>
78 <div class="gs-plan-tag gs-plan-tag--lt">For growing teams</div>
79 </div>
80 </div>
81 <div class="gs-price gs-price--lt">
82 <sup class="gs-price__cur gs-price__cur--lt">$</sup>
83 <span class="gs-price__num gs-price__num--pro" data-monthly="29" data-annual="23">29</span>
84 <span class="gs-price__per gs-price__per--lt">/month</span>
85 </div>
86 <ul class="gs-features gs-features--lt">
87 <li><span class="gs-check gs-check--pro">✓</span> Unlimited projects</li>
88 <li><span class="gs-check gs-check--pro">✓</span> 100 GB storage</li>
89 <li><span class="gs-check gs-check--pro">✓</span> Priority support</li>
90 <li><span class="gs-check gs-check--pro">✓</span> Custom domain</li>
91 <li><span class="gs-check gs-check--pro">✓</span> Analytics dashboard</li>
92 <li><span class="gs-check gs-check--pro">✓</span> Team collaboration</li>
93 </ul>
94 <a href="#" class="gs-btn gs-btn--pro">Get Pro →</a>
95 </div>
96 </div>
97
98 <!-- Enterprise -->
99 <div class="col-lg-4 col-md-12">
100 <div class="gs-card gs-card--ent">
101 <span class="gs-ent-badge">? Enterprise</span>
102 <div class="gs-card__header">
103 <div class="gs-card__icon gs-card__icon--ent">
104 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"
105 viewBox="0 0 24 24" stroke-width="2" stroke="#FCD34D">
106 <path stroke-linecap="round" stroke-linejoin="round"
107 d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
108 </svg>
109 </div>
110 <div>
111 <div class="gs-plan-name gs-plan-name--lt">Enterprise</div>
112 <div class="gs-plan-tag gs-plan-tag--gold">For large organisations</div>
113 </div>
114 </div>
115 <div class="gs-price gs-price--gold">
116 <sup class="gs-price__cur gs-price__cur--lt">$</sup>
117 <span class="gs-price__num gs-price__num--gold" data-monthly="99" data-annual="79">99</span>
118 <span class="gs-price__per gs-price__per--lt">/month</span>
119 </div>
120 <ul class="gs-features gs-features--lt">
121 <li><span class="gs-check gs-check--gold">✓</span> Unlimited everything</li>
122 <li><span class="gs-check gs-check--gold">✓</span> 1 TB storage</li>
123 <li><span class="gs-check gs-check--gold">✓</span> Dedicated account manager</li>
124 <li><span class="gs-check gs-check--gold">✓</span> SSO / SAML integration</li>
125 <li><span class="gs-check gs-check--gold">✓</span> Custom SLA guarantee</li>
126 <li><span class="gs-check gs-check--gold">✓</span> On-premise deployment</li>
127 </ul>
128 <a href="#" class="gs-btn gs-btn--ent">Contact sales →</a>
129 </div>
130 </div>
131 </div>
132
133 <!-- ── Trust strip ────────────────────────────────────────── -->
134 <div class="gs-trust">
135 <span>? No credit card required</span>
136 <span class="gs-trust__dot">·</span>
137 <span>✨ Cancel anytime</span>
138 <span class="gs-trust__dot">·</span>
139 <span>? 12,000+ happy teams</span>
140 </div>
141
142</div>More Cards snippets
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.
CardsView →
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.
CardsView →
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.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.