Bootstrap CSS Pricing Table Template

Utilities Bootstrap 5Free+ CSS

Bootstrap CSS Pricing Table Template — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

3.5k views164 downloads5 years ago

gosnippets.com/preview/bootstrap-css-pricing-table-template

Source Code

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                        <h3 class="title">Standard</h3>
8                        <span class="price-value">
9                            $10<span class="month">/ month</span>
10                        </span>
11                    </div>
12                    <ul class="pricing-content">
13                        <li>50GB Disk Space</li>
14                        <li>50 Email Accounts</li>
15                        <li>50GB Monthly Bandwidth</li>
16                        <li>10 Subdomains</li>
17                        <li>15 Domains</li>
18                    </ul>
19                    <a href="#" class="pricingTable-signup">Sign Up</a>
20                </div>
21            </div>
22            <div class="col-md-4 col-sm-6">
23                <div class="pricingTable orange">
24                    <div class="pricingTable-header">
25                        <h3 class="title">Business</h3>
26                        <span class="price-value">
27                            $20<span class="month">/ month</span>
28                        </span>
29                    </div>
30                    <ul class="pricing-content">
31                        <li>60GB Disk Space</li>
32                        <li>60 Email Accounts</li>
33                        <li>60GB Monthly Bandwidth</li>
34                        <li>15 Subdomains</li>
35                        <li>20 Domains</li>
36                    </ul>
37                    <a href="#" class="pricingTable-signup">Sign Up</a>
38                </div>
39            </div>
40            <div class="col-md-4 col-sm-6">
41                <div class="pricingTable pink">
42                    <div class="pricingTable-header">
43                        <h3 class="title">Premium</h3>
44                        <span class="price-value">
45                            $30<span class="month">/ month</span>
46                        </span>
47                    </div>
48                    <ul class="pricing-content">
49                        <li>70GB Disk Space</li>
50                        <li>70 Email Accounts</li>
51                        <li>70GB Monthly Bandwidth</li>
52                        <li>20 Subdomains</li>
53                        <li>25 Domains</li>
54                    </ul>
55                    <a href="#" class="pricingTable-signup">Sign Up</a>
56                </div>
57            </div>
58        </div>
59    </div>
60</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-4 col-sm-6"> 5 <div class="pricingTable"> 6 <div class="pricingTable-header"> 7 <h3 class="title">Standard</h3> 8 <span class="price-value"> 9 $10<span class="month">/ month</span> 10 </span> 11 </div> 12 <ul class="pricing-content"> 13 <li>50GB Disk Space</li> 14 <li>50 Email Accounts</li> 15 <li>50GB Monthly Bandwidth</li> 16 <li>10 Subdomains</li> 17 <li>15 Domains</li> 18 </ul> 19 <a href="#" class="pricingTable-signup">Sign Up</a> 20 </div> 21 </div> 22 <div class="col-md-4 col-sm-6"> 23 <div class="pricingTable orange"> 24 <div class="pricingTable-header"> 25 <h3 class="title">Business</h3> 26 <span class="price-value"> 27 $20<span class="month">/ month</span> 28 </span> 29 </div> 30 <ul class="pricing-content"> 31 <li>60GB Disk Space</li> 32 <li>60 Email Accounts</li> 33 <li>60GB Monthly Bandwidth</li> 34 <li>15 Subdomains</li> 35 <li>20 Domains</li> 36 </ul> 37 <a href="#" class="pricingTable-signup">Sign Up</a> 38 </div> 39 </div> 40 <div class="col-md-4 col-sm-6"> 41 <div class="pricingTable pink"> 42 <div class="pricingTable-header"> 43 <h3 class="title">Premium</h3> 44 <span class="price-value"> 45 $30<span class="month">/ month</span> 46 </span> 47 </div> 48 <ul class="pricing-content"> 49 <li>70GB Disk Space</li> 50 <li>70 Email Accounts</li> 51 <li>70GB Monthly Bandwidth</li> 52 <li>20 Subdomains</li> 53 <li>25 Domains</li> 54 </ul> 55 <a href="#" class="pricingTable-signup">Sign Up</a> 56 </div> 57 </div> 58 </div> 59 </div> 60</div>