Bootstrap 4 Responsive Pricing Table Code Snippet

It is a responsive Bootstrap 4 pricing table with hover effects, custom design, and disabled text. we can use it to show web hosting prices and plans.

HTML

<section class="pricing">
    <div class="container">
         <h1>Price Tables</h1>
         <div class="row">
            <!-- Free Tier -->
            <div class="col-sm-4">
               <div class="card">
                  <div class="card-body">
                     <h5 class="card-title text-uppercase text-center">Personal</h5>
                     <div class="price">
                        <span class="currency">$</span>
                        <span class="value">16</span>
                        <span class="duration">/Month</span>
                     </div>
                     <ul>
                        <li><strong>Unlimited Users</strong></li>
                        <li>150GB Storage</li>
                        <li class="disable">Unlimited Public Projects</li>
                        <li>Community Access</li>
                        <li class="disable">Unlimited Private Projects</li>
                        <li class="disable">Dedicated Phone Support</li>
                        <li>Unlimited Free Subdomains</li>
                        <li class="disable">Monthly Status Reports</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn btn-primary">Select</a>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Plus Tier -->
            <div class="col-sm-4">
               <div class="card plus">
                  <div class="card-body">
                     <h5 class="card-title text-uppercase text-center">Plus</h5>
                     <div class="price">
                        <span class="currency">$</span>
                        <span class="value">29</span>
                        <span class="duration">/Month</span>
                     </div>
                     <ul>
                        <li><strong>Unlimited Users</strong></li>
                        <li>200GB Storage</li>
                        <li>Unlimited Public Projects</li>
                        <li class="disable">Community Access</li>
                        <li>Unlimited Private Projects</li>
                        <li class="disable">Dedicated Phone Support</li>
                        <li class="disable">Unlimited Free Subdomains</li>
                        <li>Monthly Status Reports</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn btn-primary">Select</a>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Pro Tier -->
            <div class="col-sm-4">
               <div class="card">
                  <div class="card-body">
                     <h5 class="card-title text-uppercase text-center">Pro</h5>
                     <div class="price">
                        <span class="currency">$</span>
                        <span class="value">49</span>
                        <span class="duration">/Month</span>
                     </div>
                     <ul>
                        <li><strong>Unlimited Users</strong></li>
                        <li>250GB Storage</li>
                        <li>Unlimited Public Projects</li>
                        <li>Community Access</li>
                        <li>Unlimited Private Projects</li>
                        <li>Dedicated Phone Support</li>
                        <li>Unlimited Free Subdomains</li>
                        <li>Monthly Status Reports</li>
                     </ul>
                     <div class="pricing-footer">
                        <a href="#" class="btn btn-primary">Select</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
    </div>
</section>

CSS

.pricing {
    color: #333;
    padding: 50px 0px 50px;
}
.pricing h1 {
    text-align: center;
    font-size: 30px;
    margin: 10px 0px 40px;
}
.pricing .card {
    transition: all 0.2s;
    border: 2px solid #f1f3f4;
}
.pricing .card-title {
  font-size: 22px;
  letter-spacing: .1rem;
}
.pricing ul {
  padding: 0;
}
.pricing ul li {
    list-style: none;
    padding: 10px 20px;
    text-align: center;
    margin: 5px 0px;
}
.pricing ul li:nth-of-type(2n+1) {
  background-color: #f1f1f1;
}
.pricing .btn {
    border-radius: 0px;
    letter-spacing: 1px;
    padding: 6px 20px;
    background: #03A9F4;
    border: none;
    font-size: 18px;
    border-radius: 4px;
}
.card-body {
  padding: 30px 0;
  text-align: center;
}
.card.plus {
    border: 2px solid #e91e63;
}
.pricing-footer {
    padding: 30px 0 0px;
    text-align: center;
    border-top: 1px solid #ddd;
}
.pricing .card.plus .btn {
    background: #E91E63;
}
.card.plus .currency, .card.plus .duration {
  color: #e91e63;
}
.card.plus .value {
  color: #e91e63;
}
.pricing .value {
  font-size: 4rem;
  font-weight: 300;
}
.pricing .duration {
  font-size: 1.4rem;
}
.pricing .currency {
  display: inline-block;
  margin-top: 10px;
  vertical-align: top;
  font-size: 2rem;
  font-weight: 700;
}
.currency, .duration {
  color: rgba(23,61,80,.4);
}
.pricing .card:hover {
  margin-top: -.25rem;
  margin-bottom: .25rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .disable{
  color: #b9b9b9;
}
.pricing .disable:hover{
  cursor: no-drop;
}