Bootstrap is a framework works based on the grid layout dividing the width of the viewing area into twelve equal parts. There are many default components like tables, alerts, modals, etc. which can be added without any coding skill. But adding customized components in Bootstrap site needs basic CSS and HTML knowledge along with the knowledge of using available properties from the framework. Pricing table is one such component needed by most of the Bootstrap site owners. In this article let us create a Bootstrap pricing table widget with custom CSS.
Below is the simple and elegant CSS pricing table using Bootstrap.
How to Add Bootstrap Pricing Table Widget on your Site?
The pricing table is made with pure CSS hence there will is no need of JavaScript files. You need to insert CSS and HTML code on your page to add the pricing table.
CSS for Pricing Table Widget
Add the below CSS code under the header section between <head>…<head> tags of your page. You can either add custom CSS on the page using <style>…</style> tags or save it as an external stylesheet and link on the page.
The table has two sections – header and details. The header section contains the price amount showing bigger font size, $ symbol is inserted using superscript and per month is shown using small font size. The details section is a unordered list with “list-style:none” to remove the bullets.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
#price-section {
background-color: #fafafa;
}
.pricing .pricing-head {
position: relative;
background: rgb(158, 188, 133);
color: #ffffff;
text-align: center;
font-weight: bold;
}
.pricing .price {
display: inline-block;
position: relative;
}
.pricing .price sup {
position: absolute;
top: 50px;
left: -10px;
font-size: 24px;
}
.pricing .price .price-amount {
font-size: 108px;
letter-spacing: -4px;
}
.pricing .price small {
position: relative;
left: -10px;
font-size: 18px;
}
.pricing ul {
list-style: none;
margin: 0;
background: #eee;
text-align: center;
padding-left: 0px;
}
.pricing ul li {
border-bottom: solid 1px #e1e1e1;
padding-top: 20px;
padding-bottom: 20px;
}
.pricing .pricing-grab {
display: block;
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px 12px;
color: #ffffff;
background: rgb(211, 123, 123);
}
</style>HTML for Pricing Table Widget
Now add the below HTML code inside the body of your page. The example widget contains three plans with each plan contains a heading, 7 features and a button. Code for each plan block is highlighted with comments which you can modify with your own details.
<div class="row row main-low-margin">
<!-- Details for Plan 1 -->
<div class="col-md-4 col-sm-4">
<div class="pricing">
<div class="pricing-head">
<span class="price">
<sup>$</sup>
<span class="price-amount">12 </span>
<small>per month</small>
</span>
</div>
<ul>
<li><strong>BASIC PLAN</strong></li>
<li><strong>1 GB </strong> Data</li>
<li>10 <strong>Emails</strong></li>
<li>Limit Of <strong>10</strong> Users</li>
<li><strong>24x7</strong> Support</li>
<li><strong>Online</strong> Access Available</li>
<li><strong>Online</strong> Management Tool</li>
</ul>
<a href="#" class="pricing-grab">GET IT NOW</a>
</div>
</div>
<!-- Details for Plan 2 -->
<div class="col-md-4 col-sm-4">
<div class="pricing">
<div class="pricing-head">
<span class="price">
<sup>$</sup>
<span class="price-amount">15 </span>
<small>per month</small>
</span>
</div>
<ul>
<li><strong>MEDIUM PLAN</strong></li>
<li><strong>5 GB </strong> Data</li>
<li>15 <strong>Emails</strong></li>
<li>Limit Of <strong>15</strong> Users</li>
<li><strong>24x7</strong> Support</li>
<li><strong>Online</strong> Access Available</li>
<li><strong>Online</strong> Management Tool</li>
</ul>
<a href="#" class="pricing-grab">GET IT NOW</a>
</div>
</div>
<!-- Details for Plan 3 -->
<div class="col-md-4 col-sm-4">
<div class="pricing">
<div class="pricing-head">
<span class="price">
<sup>$</sup>
<span class="price-amount">18 </span>
<small>per month</small>
</span>
</div>
<ul>
<li><strong>ADVANCE PLAN</strong></li>
<li><strong>10 GB </strong> Data</li>
<li>20 <strong>Emails</strong></li>
<li>Limit Of <strong>20</strong> Users</li>
<li><strong>24x7</strong> Support</li>
<li><strong>Online</strong> Access Available</li>
<li><strong>Online</strong> Management Tool</li>
</ul>
<a href="#" class="pricing-grab">GET IT NOW</a>
</div>
</div>
</div>That’s it!!! Save your changes and view the page on the browser to see a beautiful pricing table with three plans. Ensure to replace the content with you own. If you want to use more plans then adjust the “col-md-4” and “col-sm-4” grid classes based on the columns you need.
Leave a Reply
Your email is safe with us.