Bootstrap pricing table

Utilities Bootstrap 5Free+ CSS

Free Bootstrap 5 utility snippet — Bootstrap pricing table. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

2.9k views123 downloads5 years ago

gosnippets.com/preview/bootstrap-pricing-table

Source Code

1<div class="demo">
2    <div class="container"> 
3        <div class="row">
4            <div class="col-md-3 col-sm-6">
5                <div class="pricingTable">
6                    <div class="pricingTable-header">
7                        <h3 class="heading">Standard</h3>
8                        <span class="price-value">
9                            <span class="currency">$</span> 10
10                            <span class="month">/mo</span>
11                        </span>
12                    </div>
13                    <div class="pricing-content">
14                        <ul>
15                            <li>50GB Disk Space</li>
16                            <li>50 Email Accounts</li>
17                            <li>50GB Monthly Bandwidth</li>
18                            <li>10 Subdomains</li>
19                            <li>15 Domains</li>
20                        </ul>
21                        <a href="#" class="read">sign up</a>
22                    </div>
23                </div>
24            </div>
25            <div class="col-md-3 col-sm-6">
26                <div class="pricingTable">
27                    <div class="pricingTable-header">
28                        <h3 class="heading">Business</h3>
29                        <span class="price-value">
30                            <span class="currency">$</span> 20
31                            <span class="month">/mo</span>
32                        </span>
33                    </div>
34                    <div class="pricing-content">
35                        <ul>
36                            <li>60GB Disk Space</li>
37                            <li>60 Email Accounts</li>
38                            <li>60GB Monthly Bandwidth</li>
39                            <li>15 Subdomains</li>
40                            <li>20 Domains</li>
41                        </ul>
42                        <a href="#" class="read">sign up</a>
43                    </div>
44                </div>
45            </div>
46            <div class="col-md-3 col-sm-6">
47                <div class="pricingTable">
48                    <div class="pricingTable-header">
49                        <h3 class="heading">Premium</h3>
50                        <span class="price-value">
51                            <span class="currency">$</span> 30
52                            <span class="month">/mo</span>
53                        </span>
54                    </div>
55                    <div class="pricing-content">
56                        <ul>
57                            <li>70GB Disk Space</li>
58                            <li>70 Email Accounts</li>
59                            <li>70GB Monthly Bandwidth</li>
60                            <li>20 Subdomains</li>
61                            <li>25 Domains</li>
62                        </ul>
63                        <a href="#" class="read">sign up</a>
64                    </div>
65                </div>
66            </div>
67            <div class="col-md-3 col-sm-6">
68                <div class="pricingTable">
69                    <div class="pricingTable-header">
70                        <h3 class="heading">Extra</h3>
71                        <span class="price-value">
72                            <span class="currency">$</span> 40
73                            <span class="month">/mo</span>
74                        </span>
75                    </div>
76                    <div class="pricing-content">
77                        <ul>
78                            <li>80GB Disk Space</li>
79                            <li>80 Email Accounts</li>
80                            <li>80GB Monthly Bandwidth</li>
81                            <li>25 Subdomains</li>
82                            <li>30 Domains</li>
83                        </ul>
84                        <a href="#" class="read">sign up</a>
85                    </div>
86                </div>
87            </div>
88        </div>
89    </div>
90</div>

More Utilities snippets

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.

UtilitiesView →

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.

UtilitiesView →

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.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="demo"> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-md-3 col-sm-6"> 5 <div class="pricingTable"> 6 <div class="pricingTable-header"> 7 <h3 class="heading">Standard</h3> 8 <span class="price-value"> 9 <span class="currency">$</span> 10 10 <span class="month">/mo</span> 11 </span> 12 </div> 13 <div class="pricing-content"> 14 <ul> 15 <li>50GB Disk Space</li> 16 <li>50 Email Accounts</li> 17 <li>50GB Monthly Bandwidth</li> 18 <li>10 Subdomains</li> 19 <li>15 Domains</li> 20 </ul> 21 <a href="#" class="read">sign up</a> 22 </div> 23 </div> 24 </div> 25 <div class="col-md-3 col-sm-6"> 26 <div class="pricingTable"> 27 <div class="pricingTable-header"> 28 <h3 class="heading">Business</h3> 29 <span class="price-value"> 30 <span class="currency">$</span> 20 31 <span class="month">/mo</span> 32 </span> 33 </div> 34 <div class="pricing-content"> 35 <ul> 36 <li>60GB Disk Space</li> 37 <li>60 Email Accounts</li> 38 <li>60GB Monthly Bandwidth</li> 39 <li>15 Subdomains</li> 40 <li>20 Domains</li> 41 </ul> 42 <a href="#" class="read">sign up</a> 43 </div> 44 </div> 45 </div> 46 <div class="col-md-3 col-sm-6"> 47 <div class="pricingTable"> 48 <div class="pricingTable-header"> 49 <h3 class="heading">Premium</h3> 50 <span class="price-value"> 51 <span class="currency">$</span> 30 52 <span class="month">/mo</span> 53 </span> 54 </div> 55 <div class="pricing-content"> 56 <ul> 57 <li>70GB Disk Space</li> 58 <li>70 Email Accounts</li> 59 <li>70GB Monthly Bandwidth</li> 60 <li>20 Subdomains</li> 61 <li>25 Domains</li> 62 </ul> 63 <a href="#" class="read">sign up</a> 64 </div> 65 </div> 66 </div> 67 <div class="col-md-3 col-sm-6"> 68 <div class="pricingTable"> 69 <div class="pricingTable-header"> 70 <h3 class="heading">Extra</h3> 71 <span class="price-value"> 72 <span class="currency">$</span> 40 73 <span class="month">/mo</span> 74 </span> 75 </div> 76 <div class="pricing-content"> 77 <ul> 78 <li>80GB Disk Space</li> 79 <li>80 Email Accounts</li> 80 <li>80GB Monthly Bandwidth</li> 81 <li>25 Subdomains</li> 82 <li>30 Domains</li> 83 </ul> 84 <a href="#" class="read">sign up</a> 85 </div> 86 </div> 87 </div> 88 </div> 89 </div> 90</div>