Bootstrap 5 responsive pricing table with hover effects

Utilities Bootstrap 5Free+ CSS

Bootstrap 5 responsive pricing table with hover effects: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.

6.2k views147 downloads6 years ago

gosnippets.com/preview/bootstrap-5-responsive-pricing-table-with-hover-effects

Source Code

1<section class="pricing py-5">
2  <div class="container">
3    <div class="row">
4      <!-- Free Tier -->
5      <div class="col-lg-4">
6        <div class="card mb-5 mb-lg-0">
7          <div class="card-body">
8            <h5 class="card-title text-muted text-uppercase text-center">Free</h5>
9            <h6 class="card-price text-center">$0<span class="period">/month</span></h6>
10            <hr>
11            <ul class="fa-ul">
12              <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
13              <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
14              <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
15              <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
16              <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
17              <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
18              <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
19              <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
20            </ul>
21            <a href="#" class="btn w-100 btn-primary text-uppercase">Button</a>
22          </div>
23        </div>
24      </div>
25      <!-- Plus Tier -->
26      <div class="col-lg-4">
27        <div class="card mb-5 mb-lg-0">
28          <div class="card-body">
29            <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>
30            <h6 class="card-price text-center">$9<span class="period">/month</span></h6>
31            <hr>
32            <ul class="fa-ul">
33              <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>
34              <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
35              <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
36              <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
37              <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
38              <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
39              <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
40              <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
41            </ul>
42            <a href="#" class="btn w-100 btn-primary text-uppercase">Button</a>
43          </div>
44        </div>
45      </div>
46      <!-- Pro Tier -->
47      <div class="col-lg-4">
48        <div class="card">
49          <div class="card-body">
50            <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
51            <h6 class="card-price text-center">$49<span class="period">/month</span></h6>
52            <hr>
53            <ul class="fa-ul">
54              <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>
55              <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>
56              <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
57              <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
58              <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
59              <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
60              <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>
61              <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>
62            </ul>
63            <a href="#" class="btn w-100 btn-primary text-uppercase">Button</a>
64          </div>
65        </div>
66      </div>
67    </div>
68  </div>
69</section>

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<section class="pricing py-5"> 2 <div class="container"> 3 <div class="row"> 4  5 <div class="col-lg-4"> 6 <div class="card mb-5 mb-lg-0"> 7 <div class="card-body"> 8 <h5 class="card-title text-muted text-uppercase text-center">Free</h5> 9 <h6 class="card-price text-center">$0<span class="period">/month</span></h6> 10 <hr> 11 <ul class="fa-ul"> 12 <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li> 13 <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li> 14 <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li> 15 <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li> 16 <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li> 17 <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li> 18 <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li> 19 <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li> 20 </ul> 21 <a href="#" class="btn w-100 btn-primary text-uppercase">Button</a> 22 </div> 23 </div> 24 </div> 25  26 <div class="col-lg-4"> 27 <div class="card mb-5 mb-lg-0"> 28 <div class="card-body"> 29 <h5 class="card-title text-muted text-uppercase text-center">Plus</h5> 30 <h6 class="card-price text-center">$9<span class="period">/month</span></h6> 31 <hr> 32 <ul class="fa-ul"> 33 <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li> 34 <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li> 35 <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li> 36 <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li> 37 <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li> 38 <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li> 39 <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li> 40 <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li> 41 </ul> 42 <a href="#" class="btn w-100 btn-primary text-uppercase">Button</a> 43 </div> 44 </div> 45 </div> 46  47 <div class="col-lg-4"> 48 <div class="card"> 49 <div class="card-body"> 50 <h5 class="card-title text-muted text-uppercase text-center">Pro</h5> 51 <h6 class="card-price text-center">$49<span class="period">/month</span></h6> 52 <hr> 53 <ul class="fa-ul"> 54 <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li> 55 <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li> 56 <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li> 57 <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li> 58 <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li> 59 <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li> 60 <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li> 61 <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li> 62 </ul> 63 <a href="#" class="btn w-100 btn-primary text-uppercase">Button</a> 64 </div> 65 </div> 66 </div> 67 </div> 68 </div> 69</section>