Add a utility to your UI with Bootstrap 5 pricing plan | Bootstrap 5 pricing table. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
2 <symbol id="right" viewBox="0 0 16 16">
3 <title>Right Tick</title>
4 <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
5 </symbol>
6</svg>
7
8
9<div class="container py-3">
10 <header>
11 <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
12
13
14 </div>
15
16 <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
17 <h1 class="display-4 fw-normal">Pricing</h1>
18 <p class="fs-5 text-muted">Check out our most effective plans. You can choose according to your budget. </p>
19 </div>
20 </header>
21
22 <main>
23 <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
24 <div class="col">
25 <div class="card mb-4 rounded-3 shadow-sm">
26 <div class="card-header py-3">
27 <h4 class="my-0 fw-normal">Free</h4>
28 </div>
29 <div class="card-body">
30 <h1 class="card-title pricing-card-title">₹0<small class="text-muted fw-light">/mo</small></h1>
31 <ul class="list-unstyled mt-3 mb-4">
32 <li>1 user included</li>
33 <li>2 GB of storage</li>
34 <li>No Email support</li>
35 <li>No Help Center</li>
36 </ul>
37 <button type="button" class="w-100 btn btn-lg btn-outline-danger">Sign up for free</button>
38 </div>
39 </div>
40 </div>
41 <div class="col">
42 <div class="card mb-4 rounded-3 shadow-sm">
43 <div class="card-header py-3">
44 <h4 class="my-0 fw-normal">Pro</h4>
45 </div>
46 <div class="card-body">
47 <h1 class="card-title pricing-card-title">₹550<small class="text-muted fw-light">/mo</small></h1>
48 <ul class="list-unstyled mt-3 mb-4">
49 <li>20 users included</li>
50 <li>10 GB of storage</li>
51 <li>Priority email support</li>
52 <li>Help center access</li>
53 </ul>
54 <button type="button" class="w-100 btn btn-lg btn-danger">Get started</button>
55 </div>
56 </div>
57 </div>
58 <div class="col">
59 <div class="card mb-4 rounded-3 shadow-sm border-danger">
60 <div class="card-header py-3 text-white bg-danger border-danger">
61 <h4 class="my-0 fw-normal">Enterprise</h4>
62 </div>
63 <div class="card-body">
64 <h1 class="card-title pricing-card-title">₹1000<small class="text-muted fw-light">/mo</small></h1>
65 <ul class="list-unstyled mt-3 mb-4">
66 <li>30 users included</li>
67 <li>30 GB of storage</li>
68 <li>Phone and email support</li>
69 <li>Help center access</li>
70 </ul>
71 <button type="button" class="w-100 btn btn-lg btn-danger">Contact us</button>
72 </div>
73 </div>
74 </div>
75 </div>
76
77 <h2 class="display-6 text-center mb-4">Compare plans</h2>
78
79 <div class="table-responsive">
80 <table class="table text-center">
81 <thead>
82 <tr>
83 <th style="width: 34%;"></th>
84 <th style="width: 22%;">Free</th>
85 <th style="width: 22%;">Pro</th>
86 <th style="width: 22%;">Enterprise</th>
87 </tr>
88 </thead>
89 <tbody>
90 <tr>
91 <th scope="row" class="text-start">Public</th>
92 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
93 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
94 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
95 </tr>
96 <tr>
97 <th scope="row" class="text-start">Private</th>
98 <td></td>
99 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
100 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
101 </tr>
102 </tbody>
103
104 <tbody>
105 <tr>
106 <th scope="row" class="text-start">Permissions</th>
107 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
108 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
109 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
110 </tr>
111 <tr>
112 <th scope="row" class="text-start">Sharing</th>
113 <td></td>
114 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
115 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
116 </tr>
117 <tr>
118 <th scope="row" class="text-start">Unlimited members</th>
119 <td></td>
120 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
121 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
122 </tr>
123 <tr>
124 <th scope="row" class="text-start">Extra security</th>
125 <td></td>
126 <td></td>
127 <td><svg class="bi" width="24" height="24"><use xlink:href="#right"/></svg></td>
128 </tr>
129 </tbody>
130 </table>
131 </div>
132 </main>
133</div>
134
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any 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
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.