Responsive Pricing Table using Bootstrap

Here is an awesome code snippet to create responsive pricing table using Bootstrap 4 framework and CSS. This pricing table template is useful for comparing subscription plans or different product tiers. It creates set of three tables (basic, pro and premium) in a row for subscription plans.

Furthermore, you can fully customize table (colors, layout, buttons etc) with Bootstrap built-in classes or with additional CSS.

Plugin Overview

Plugin: pricing-table-bootstrap-snippet
Author: Bootstrap Studio
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 6.04 KB

How to Create Pricing Table with Bootstrap

1. First of all load Bootstrap CSS into your HTML document.

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>

2. After that create a basic HTML structure for pricing tables as follows:

<section class="pricing-table">
   <div class="container">
      <div class="block-heading">
         <h2>Pricing Table</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in, mattis vitae leo.</p>
      </div>
      <div class="row justify-content-md-center">
         <div class="col-md-5 col-lg-4">
            <div class="item">
               <div class="heading">
                  <h3>BASIC</h3>
               </div>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               <div class="features">
                  <h4><span class="feature">Full Support</span> : <span class="value">No</span></h4>
                  <h4><span class="feature">Duration</span> : <span class="value">30 Days</span></h4>
                  <h4><span class="feature">Storage</span> : <span class="value">10GB</span></h4>
               </div>
               <div class="price">
                  <h4>$25</h4>
               </div>
               <button class="btn btn-block btn-outline-primary" type="submit">BUY NOW</button>
            </div>
         </div>
         <div class="col-md-5 col-lg-4">
            <div class="item">
               <div class="ribbon">Best Value</div>
               <div class="heading">
                  <h3>PRO</h3>
               </div>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               <div class="features">
                  <h4><span class="feature">Full Support</span> : <span class="value">Yes</span></h4>
                  <h4><span class="feature">Duration</span> : <span class="value">60 Days</span></h4>
                  <h4><span class="feature">Storage</span> : <span class="value">50GB</span></h4>
               </div>
               <div class="price">
                  <h4>$50</h4>
               </div>
               <button class="btn btn-block btn-primary" type="submit">BUY NOW</button>
            </div>
         </div>
         <div class="col-md-5 col-lg-4">
            <div class="item">
               <div class="heading">
                  <h3>PREMIUM</h3>
               </div>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               <div class="features">
                  <h4><span class="feature">Full Support</span> : <span class="value">Yes</span></h4>
                  <h4><span class="feature">Duration</span> : <span class="value">120 Days</span></h4>
                  <h4><span class="feature">Storage</span> : <span class="value">150GB</span></h4>
               </div>
               <div class="price">
                  <h4>$150</h4>
               </div>
               <button class="btn btn-block btn-outline-primary" type="submit">BUY NOW</button>
            </div>
         </div>
      </div>
   </div>
</section>

3. Now its time to style your tables, you can download this project and include the style.css file into your webpage.

<link rel="stylesheet" type="text/css" href="css/style.css">

4. If you want to add inline CSS styles for Bootstrap responsive pricing table, include the following CSS.

.pricing-table{
  background-color: #eee;
  font-family: 'Montserrat', sans-serif;
}

.pricing-table .block-heading {
  padding-top: 50px;
  margin-bottom: 40px;
  text-align: center; 
}

.pricing-table .block-heading h2 {
  color: #3b99e0;
}

.pricing-table .block-heading p {
  text-align: center;
  max-width: 420px;
  margin: auto;
  opacity: 0.7; 
}

.pricing-table .heading {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
}

.pricing-table .item {
  background-color: #ffffff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
  border-top: 2px solid #5ea4f3;
  padding: 30px;
  overflow: hidden;
  position: relative; 
}

.pricing-table .col-md-5:not(:last-child) .item {
  margin-bottom: 30px; 
}

.pricing-table .item button {
  font-weight: 600; 
}

.pricing-table .ribbon {
  width: 160px;
  height: 32px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
  background: #4dbe3b;
  transform: rotate(45deg);
  position: absolute;
  right: -42px;
  top: 20px;
  padding-top: 7px; 
}

.pricing-table .item p {
  text-align: center;
  margin-top: 20px;
  opacity: 0.7; 
}

.pricing-table .features .feature {
  font-weight: 600; }

.pricing-table .features h4 {
  text-align: center;
  font-size: 18px;
  padding: 5px; 
}

.pricing-table .price h4 {
  margin: 15px 0;
  font-size: 45px;
  text-align: center;
  color: #2288f9; 
}

.pricing-table .buy-now button {
  text-align: center;
  margin: auto;
  font-weight: 600;
  padding: 9px 0; 
}

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...