Bootstrap 5 pricing plan | Bootstrap 5 pricing table

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