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.
26
Components
80
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.