Add a utility to your UI with Creative pricing table Bootstrap 5 snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div class="demo">
2 <div class="container">
3 <div class="row">
4 <div class="col-md-4 col-sm-6">
5 <div class="pricingTable">
6 <div class="pricingTable-header">
7 <svg x="0px" y="0px" width="350px" height="230px" viewBox="0 5 350 200">
8 <g>
9 <path fill="#D7182A" d="M58.377,62.185c11.838-16.874,24.94-20.129,43.466-18.93C102.476,24.326,166.999,15.932,175.042,0
10 c13.916,18.501,71.028,22.526,72.926,43.769c18.436-3.169,39.31,6.852,42.563,17.131c76.091-0.171,82.236,75.631,0.633,78.715
11 c-9.939,13.106-23.496,19.87-43.287,17.988C244.805,176.36,190.766,183.04,174.59,200c-13.285-17.216-71.12-23.04-71.934-42.482
12 c-18.795,2.228-33.888-4.284-44.732-18.502C-31.088,134.903-6.688,54.989,58.377,62.185L58.377,62.185z"></path>
13 <path fill="none" stroke="#FFFFFF" stroke-width="0" stroke-linecap="square" stroke-miterlimit="10" d="M58.377,62.185
14 c11.838-16.874,24.94-20.129,43.466-18.93C102.476,24.326,166.999,15.932,175.042,0c13.916,18.501,71.028,22.526,72.926,43.769
15 c18.436-3.169,39.31,6.852,42.563,17.131c76.091-0.171,82.236,75.631,0.633,78.715c-9.939,13.106-23.496,19.87-43.287,17.988
16 C244.805,176.36,190.766,183.04,174.59,200c-13.285-17.216-71.12-23.04-71.934-42.482c-18.795,2.228-33.888-4.284-44.732-18.502
17 C-31.088,134.903-6.688,54.989,58.377,62.185L58.377,62.185z"></path>
18 <path fill="none" stroke="#FFFFFF" stroke-width="3.54" d="M112.326,54.133c-4.519-21.67,51.78-25.096,63.167-39.401
19 c12.741,16.617,67.686,18.501,61.993,39.829c18.615-4.54,45.183,6.509,46.81,17.216c68.048,0.771,75.367,54.562,0.542,57.303
20 c-5.873,13.104-26.024,20.128-46.9,17.217c1.898,22.182-47.263,25.096-63.076,39.144c-12.201-13.963-66.782-18.074-63.529-39.403
21 c-17.44,2.914-37.322,0.26-46.268-17.728c-78.982-0.173-61.27-62.014,1.716-55.761C70.305,53.019,100.036,52.676,112.326,54.133
22 L112.326,54.133z"></path>
23 </g>
24 </svg>
25 <h3 class="title">Standard</h3>
26 <div class="price-value">
27 <span class="amount">$10.00</span>
28 <span class="month">per month</span>
29 </div>
30 </div>
31 <ul class="pricing-content">
32 <li><b>50GB</b> Disk Space</li>
33 <li><b>50</b> Email Accounts</li>
34 <li><b>50GB</b> Bandwidth</li>
35 <li><b>10</b> Subdomains</li>
36 <li><b>15</b> Domains</li>
37 </ul>
38 <a href="#" class="pricingTable-signup">Sign Up</a>
39 </div>
40 </div>
41 <div class="col-md-4 col-sm-6">
42 <div class="pricingTable darkblue">
43 <div class="pricingTable-header">
44 <svg x="0px" y="0px" width="350px" height="230px" viewBox="0 5 350 200">
45 <g>
46 <path fill="#D7182A" d="M58.377,62.185c11.838-16.874,24.94-20.129,43.466-18.93C102.476,24.326,166.999,15.932,175.042,0
47 c13.916,18.501,71.028,22.526,72.926,43.769c18.436-3.169,39.31,6.852,42.563,17.131c76.091-0.171,82.236,75.631,0.633,78.715
48 c-9.939,13.106-23.496,19.87-43.287,17.988C244.805,176.36,190.766,183.04,174.59,200c-13.285-17.216-71.12-23.04-71.934-42.482
49 c-18.795,2.228-33.888-4.284-44.732-18.502C-31.088,134.903-6.688,54.989,58.377,62.185L58.377,62.185z"></path>
50 <path fill="none" stroke="#FFFFFF" stroke-width="0" stroke-linecap="square" stroke-miterlimit="10" d="M58.377,62.185
51 c11.838-16.874,24.94-20.129,43.466-18.93C102.476,24.326,166.999,15.932,175.042,0c13.916,18.501,71.028,22.526,72.926,43.769
52 c18.436-3.169,39.31,6.852,42.563,17.131c76.091-0.171,82.236,75.631,0.633,78.715c-9.939,13.106-23.496,19.87-43.287,17.988
53 C244.805,176.36,190.766,183.04,174.59,200c-13.285-17.216-71.12-23.04-71.934-42.482c-18.795,2.228-33.888-4.284-44.732-18.502
54 C-31.088,134.903-6.688,54.989,58.377,62.185L58.377,62.185z"></path>
55 <path fill="none" stroke="#FFFFFF" stroke-width="3.54" d="M112.326,54.133c-4.519-21.67,51.78-25.096,63.167-39.401
56 c12.741,16.617,67.686,18.501,61.993,39.829c18.615-4.54,45.183,6.509,46.81,17.216c68.048,0.771,75.367,54.562,0.542,57.303
57 c-5.873,13.104-26.024,20.128-46.9,17.217c1.898,22.182-47.263,25.096-63.076,39.144c-12.201-13.963-66.782-18.074-63.529-39.403
58 c-17.44,2.914-37.322,0.26-46.268-17.728c-78.982-0.173-61.27-62.014,1.716-55.761C70.305,53.019,100.036,52.676,112.326,54.133
59 L112.326,54.133z"></path>
60 </g>
61 </svg>
62 <h3 class="title">Business</h3>
63 <div class="price-value">
64 <span class="amount">$20.00</span>
65 <span class="month">per month</span>
66 </div>
67 </div>
68 <ul class="pricing-content">
69 <li><b>60GB</b> Disk Space</li>
70 <li><b>60</b> Email Accounts</li>
71 <li><b>60GB</b> Bandwidth</li>
72 <li><b>15</b> Subdomains</li>
73 <li><b>20</b> Domains</li>
74 </ul>
75 <a href="#" class="pricingTable-signup">Sign Up</a>
76 </div>
77 </div>
78 <div class="col-md-4 col-sm-6">
79 <div class="pricingTable blue">
80 <div class="pricingTable-header">
81 <svg x="0px" y="0px" width="350px" height="230px" viewBox="0 5 350 200">
82 <g>
83 <path fill="#D7182A" d="M58.377,62.185c11.838-16.874,24.94-20.129,43.466-18.93C102.476,24.326,166.999,15.932,175.042,0
84 c13.916,18.501,71.028,22.526,72.926,43.769c18.436-3.169,39.31,6.852,42.563,17.131c76.091-0.171,82.236,75.631,0.633,78.715
85 c-9.939,13.106-23.496,19.87-43.287,17.988C244.805,176.36,190.766,183.04,174.59,200c-13.285-17.216-71.12-23.04-71.934-42.482
86 c-18.795,2.228-33.888-4.284-44.732-18.502C-31.088,134.903-6.688,54.989,58.377,62.185L58.377,62.185z"></path>
87 <path fill="none" stroke="#FFFFFF" stroke-width="0" stroke-linecap="square" stroke-miterlimit="10" d="M58.377,62.185
88 c11.838-16.874,24.94-20.129,43.466-18.93C102.476,24.326,166.999,15.932,175.042,0c13.916,18.501,71.028,22.526,72.926,43.769
89 c18.436-3.169,39.31,6.852,42.563,17.131c76.091-0.171,82.236,75.631,0.633,78.715c-9.939,13.106-23.496,19.87-43.287,17.988
90 C244.805,176.36,190.766,183.04,174.59,200c-13.285-17.216-71.12-23.04-71.934-42.482c-18.795,2.228-33.888-4.284-44.732-18.502
91 C-31.088,134.903-6.688,54.989,58.377,62.185L58.377,62.185z"></path>
92 <path fill="none" stroke="#FFFFFF" stroke-width="3.54" d="M112.326,54.133c-4.519-21.67,51.78-25.096,63.167-39.401
93 c12.741,16.617,67.686,18.501,61.993,39.829c18.615-4.54,45.183,6.509,46.81,17.216c68.048,0.771,75.367,54.562,0.542,57.303
94 c-5.873,13.104-26.024,20.128-46.9,17.217c1.898,22.182-47.263,25.096-63.076,39.144c-12.201-13.963-66.782-18.074-63.529-39.403
95 c-17.44,2.914-37.322,0.26-46.268-17.728c-78.982-0.173-61.27-62.014,1.716-55.761C70.305,53.019,100.036,52.676,112.326,54.133
96 L112.326,54.133z"></path>
97 </g>
98 </svg>
99 <h3 class="title">Premium</h3>
100 <div class="price-value">
101 <span class="amount">$30.00</span>
102 <span class="month">per month</span>
103 </div>
104 </div>
105 <ul class="pricing-content">
106 <li><b>70GB</b> Disk Space</li>
107 <li><b>70</b> Email Accounts</li>
108 <li><b>70GB</b> Bandwidth</li>
109 <li><b>20</b> Subdomains</li>
110 <li><b>25</b> Domains</li>
111 </ul>
112 <a href="#" class="pricingTable-signup">Sign Up</a>
113 </div>
114 </div>
115 </div>
116 </div>
117</div>
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
57
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.