Responsive Bootstrap 5 pricing table template: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
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 <svg x="0" y="0" viewBox="0 0 360 220">
7 <g>
8 <path fill="#ae003d" d="M0.732,193.75c0,0,29.706,28.572,43.736-4.512c12.976-30.599,37.005-27.589,44.983-7.061
9 c8.09,20.815,22.83,41.034,48.324,27.781c21.875-11.372,46.499,4.066,49.155,5.591c6.242,3.586,28.729,7.626,38.246-14.243
10 s27.202-37.185,46.917-8.488c19.715,28.693,38.687,13.116,46.502,4.832c7.817-8.282,27.386-15.906,41.405,6.294V0H0.48
11 L0.732,193.75z"></path>
12 </g>
13 <text transform="matrix(1 0 0 1 69.7256 116.2686)" fill="#fff" font-size="78.4489">$10</text>
14 <text transform="matrix(0.9566 0 0 1 197.3096 83.9121)" fill="#fff" font-size="29.0829">.99</text>
15 <text transform="matrix(1 0 0 1 233.9629 115.5303)" fill="#fff" font-size="15.4128">/Month</text>
16 </svg>
17 <div class="pricing-content">
18 <h3 class="title">Standard</h3>
19 <ul class="pricing-content">
20 <li><b>50GB</b> Disk Space</li>
21 <li><b>50</b> Email Accounts</li>
22 <li><b>50GB</b> Bandwidth</li>
23 <li><b>10</b> Subdomains</li>
24 <li><b>15</b> Domains</li>
25 </ul>
26 <a href="#" class="pricingTable-signup">Subscribe Now</a>
27 </div>
28 </div>
29 </div>
30 <div class="col-md-4 col-sm-6">
31 <div class="pricingTable blue">
32 <svg x="0" y="0" viewBox="0 0 360 220">
33 <g>
34 <path fill="#005c99" d="M0.732,193.75c0,0,29.706,28.572,43.736-4.512c12.976-30.599,37.005-27.589,44.983-7.061
35 c8.09,20.815,22.83,41.034,48.324,27.781c21.875-11.372,46.499,4.066,49.155,5.591c6.242,3.586,28.729,7.626,38.246-14.243
36 s27.202-37.185,46.917-8.488c19.715,28.693,38.687,13.116,46.502,4.832c7.817-8.282,27.386-15.906,41.405,6.294V0H0.48
37 L0.732,193.75z"></path>
38 </g>
39 <text transform="matrix(1 0 0 1 69.7256 116.2686)" fill="#fff" font-size="78.4489">$20</text>
40 <text transform="matrix(0.9566 0 0 1 197.3096 83.9121)" fill="#fff" font-size="29.0829">.99</text>
41 <text transform="matrix(1 0 0 1 233.9629 115.5303)" fill="#fff" font-size="15.4128">/Month</text>
42 </svg>
43 <div class="pricing-content">
44 <h3 class="title">Business</h3>
45 <ul class="pricing-content">
46 <li><b>60GB</b> Disk Space</li>
47 <li><b>60</b> Email Accounts</li>
48 <li><b>60GB</b> Bandwidth</li>
49 <li><b>15</b> Subdomains</li>
50 <li><b>20</b> Domains</li>
51 </ul>
52 <a href="#" class="pricingTable-signup">Subscribe Now</a>
53 </div>
54 </div>
55 </div>
56 <div class="col-md-4 col-sm-6">
57 <div class="pricingTable red">
58 <svg x="0" y="0" viewBox="0 0 360 220">
59 <g>
60 <path fill="#db2c29" d="M0.732,193.75c0,0,29.706,28.572,43.736-4.512c12.976-30.599,37.005-27.589,44.983-7.061
61 c8.09,20.815,22.83,41.034,48.324,27.781c21.875-11.372,46.499,4.066,49.155,5.591c6.242,3.586,28.729,7.626,38.246-14.243
62 s27.202-37.185,46.917-8.488c19.715,28.693,38.687,13.116,46.502,4.832c7.817-8.282,27.386-15.906,41.405,6.294V0H0.48
63 L0.732,193.75z"></path>
64 </g>
65 <text transform="matrix(1 0 0 1 69.7256 116.2686)" fill="#fff" font-size="78.4489">$30</text>
66 <text transform="matrix(0.9566 0 0 1 197.3096 83.9121)" fill="#fff" font-size="29.0829">.99</text>
67 <text transform="matrix(1 0 0 1 233.9629 115.5303)" fill="#fff" font-size="15.4128">/Month</text>
68 </svg>
69 <div class="pricing-content">
70 <h3 class="title">Premium</h3>
71 <ul class="pricing-content">
72 <li><b>70GB</b> Disk Space</li>
73 <li><b>70</b> Email Accounts</li>
74 <li><b>70GB</b> Bandwidth</li>
75 <li><b>20</b> Subdomains</li>
76 <li><b>25</b> Domains</li>
77 </ul>
78 <a href="#" class="pricingTable-signup">Subscribe Now</a>
79 </div>
80 </div>
81 </div>
82 </div>
83 </div>
84 </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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.