Pricing table — Bootstrap utilities snippet

Utilities Bootstrap 5Free+ CSS

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

12.5k views742 downloads5 years ago

gosnippets.com/preview/pricing-table-—-bootstrap-utilities-snippet

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