content logo

Bootstrap Tables:

Bootstrap Pricing Table with Icons

Today, many companies and businesses have a pricing page with pricing tables in their website. They use these tables to showcase their products and service plans. You might wonder to yourself, how important can a pricing page be? Well, let’s start with the confusion. A pricing table helps your customers find out about all the information that they are looking for in the clearest way. They can also easily compare the plans which makes decision making much easier for them. Secondly, once the confusion is gone, you will have more customers buying from you which means building more trust on the Internet. As time goes on, more people will visit your site and your daily traffic will grow as well.

The Bootstrap pricing table we have for you in this post is designed with the best styles possible. it has the potential to make your website look much more beautiful and professional. All the panels and boxes in this colourful pricing plan table are glued together in a nice format. Each panel has its own colour and unique icon which makes this responsive pricing table even more stylish. Each item has its name written on the left side of the table which is a nice change from the usual vertical tables you see everywhere. So, don’t hesitate and get this pricing table with icons right away.

#Bootstrap Pricing Table #Pricing Table with Icons #Responsive Pricing Table #Colorful Pricing Plan

<!-- This script got from www.frontendfreecode.com -->
<h2 class="text-center">Bootstrap Pricing Table</h2>
  <!-- Pricing # -->
<div class="pricing">
  	<div class="container">
  		<div class="pricing-table table-responsive">
  			<table class="table">
  				<!-- Heading -->
  				<thead>
  					<tr>
  						<th>&nbsp;</th>
  						<th>
  							Free
  							<span class="ptable-star red">
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star-half-o"></i>
  								<i class="fa fa-star-o"></i>
  							</span>
  							<span class="ptable-price">$0.0</span>
  						</th>
  						<th class="highlight">
  							Basic
  							<span class="ptable-star green">
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star-o"></i>
  							</span>
  							<span class="ptable-price">$99.0</span>
  						</th>
  						<th>
  							Business
  							<span class="ptable-star lblue">
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  							</span>
  							<span class="ptable-price">$149.0</span>
  						</th>
  					</tr>
  				</thead>
  				<tbody>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-hdd-o"></i> Storage</span></td>
  						<td>
  							<!-- Icon -->
  							<i class="fa fa-hdd-o red"></i>
  							500 MB
  						</td>
  						<td>
  							<!-- Icon -->
  							<i class="fa fa-hdd-o green"></i>
  							100 GB
  						</td>
  						<td>
  							<!-- Icon -->
  							<i class="fa fa-hdd-o lblue"></i>
  							500 GB
  						</td>
  					</tr>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-signal"></i> Band Width</span></td>
  						<td>
  							<i class="fa fa-signal red"></i>
  							100 TB
  						</td>
  						<td>
  							<i class="fa fa-signal green"></i>
  							500 TB
  						</td>
  						<td>
  							<i class="fa fa-signal lblue"></i>
  							1000 TB
  						</td>
  					</tr>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-shield"></i> Security</span></td>
  						<td>
  							<i class="fa fa-shield red"></i>
  							100% Secure
  						</td>
  						<td>
  							<i class="fa fa-shield green"></i>
  							100% Secure
  						</td>
  						<td>
  							<i class="fa fa-shield lblue"></i>
  							100% Secure
  						</td>
  					</tr>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-headphones"></i> Support</span></td>
  						<td>
  							<i class="fa fa-times red"></i>
  							No Support
  						</td>
  						<td>
  							<i class="fa fa-phone green"></i>
  							Phone
  						</td>
  						<td>
  							<i class="fa fa-envelope-o lblue"></i>
  							E-mail / Phone
  						</td>
  					</tr>
  					<!-- Buttons -->
  					<tr>
  						<td>&nbsp;</td>
  						<td class="bg-red"><a class="btn" href="#">Sign Up</a></td>
  						<td class="bg-green"><a class="btn" href="#">Sign Up</a></td>
  						<td class="bg-lblue"><a class="btn" href="#">Sign Up</a></td>
  					</tr>
  				</tbody>
  			</table>
  		</div>
  	</div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
.pricing{
	margin:40px 0px;
}
.pricing .table{
	border-top:1px solid #ddd;
	background:#fff;
}
.pricing .table th,
.pricing .table {
	text-align: center;
}
.pricing .table th,
.pricing .table td {
	padding: 20px 10px;
	border:1px solid #ddd;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing .table th {
	width: 25%;
	font-size: 30px;
	font-weight: 400;
	border-bottom: 0;
	background:#2F313A;
	color: #EBEDF3;
	text-transform: uppercase;
}
.pricing .table th.highlight{
	border-top: 4px solid #4caf50 !important;
}
.pricing .table tr:nth-child(odd){
	background: #f0f8ff;
}
.pricing .table td:first-child{
	padding-left: 20px;
	text-align: left;
	padding-top:35px;
	background: #5F97FB;
}
.pricing tr td .ptable-title {
	font-size: 22px;
	font-weight:400;
	color: #fff;
}
.pricing tr td .ptable-title i {
	width: 23px;
	line-height: 25px;
	text-align: right;
	margin-right: 5px;
}
.pricing .ptable-star {
	position: relative;
	display: block;
	text-align: center;
}
.pricing .ptable-star.red{
	color: #e91e63;
}
.pricing .ptable-star.green{
	color: #4caf50;
}
.pricing .ptable-star.lblue{
	color: #03a9f4;
}
.pricing .ptable-star i {
	width: 8px;
	font-size: 13px;
}
.pricing .ptable-price {
	display: block;
}
.pricing tr td {
	font-size: 16px;
	line-height:32px;
	text-transform:uppercase;
}
.pricing tr td.bg-red{
	background: #e91e63;
}
.pricing tr td.bg-green{
	background: #4caf50;
}
.pricing tr td.bg-lblue{
	background: #03a9f4;
}
.pricing tr td.bg-red a,
.pricing tr td.bg-green a,
.pricing tr td.bg-lblue a{
	color: #fff;
}
.pricing tr td i {
	display: block;
	margin-bottom: 12px;
	font-size: 30px;
}
.pricing tr td i.red{
	color: #e91e63;
}
.pricing tr td i.green{
	color: #4caf50;
}
.pricing tr td i.lblue{
	color: #03a9f4;
}
.pricing tr td:first-child i{
	display:inline;
	margin-bottom:0px;
	font-size:22px;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style>
.pricing{
	margin:40px 0px;
}
.pricing .table{
	border-top:1px solid #ddd;
	background:#fff;
}
.pricing .table th,
.pricing .table {
	text-align: center;
}
.pricing .table th,
.pricing .table td {
	padding: 20px 10px;
	border:1px solid #ddd;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing .table th {
	width: 25%;
	font-size: 30px;
	font-weight: 400;
	border-bottom: 0;
	background:#2F313A;
	color: #EBEDF3;
	text-transform: uppercase;
}
.pricing .table th.highlight{
	border-top: 4px solid #4caf50 !important;
}
.pricing .table tr:nth-child(odd){
	background: #f0f8ff;
}
.pricing .table td:first-child{
	padding-left: 20px;
	text-align: left;
	padding-top:35px;
	background: #5F97FB;
}
.pricing tr td .ptable-title {
	font-size: 22px;
	font-weight:400;
	color: #fff;
}
.pricing tr td .ptable-title i {
	width: 23px;
	line-height: 25px;
	text-align: right;
	margin-right: 5px;
}
.pricing .ptable-star {
	position: relative;
	display: block;
	text-align: center;
}
.pricing .ptable-star.red{
	color: #e91e63;
}
.pricing .ptable-star.green{
	color: #4caf50;
}
.pricing .ptable-star.lblue{
	color: #03a9f4;
}
.pricing .ptable-star i {
	width: 8px;
	font-size: 13px;
}
.pricing .ptable-price {
	display: block;
}
.pricing tr td {
	font-size: 16px;
	line-height:32px;
	text-transform:uppercase;
}
.pricing tr td.bg-red{
	background: #e91e63;
}
.pricing tr td.bg-green{
	background: #4caf50;
}
.pricing tr td.bg-lblue{
	background: #03a9f4;
}
.pricing tr td.bg-red a,
.pricing tr td.bg-green a,
.pricing tr td.bg-lblue a{
	color: #fff;
}
.pricing tr td i {
	display: block;
	margin-bottom: 12px;
	font-size: 30px;
}
.pricing tr td i.red{
	color: #e91e63;
}
.pricing tr td i.green{
	color: #4caf50;
}
.pricing tr td i.lblue{
	color: #03a9f4;
}
.pricing tr td:first-child i{
	display:inline;
	margin-bottom:0px;
	font-size:22px;
}
</style>

</head>
<body>
<h2 class="text-center">Bootstrap Pricing Table</h2>
  <!-- Pricing # -->
<div class="pricing">
  	<div class="container">
  		<div class="pricing-table table-responsive">
  			<table class="table">
  				<!-- Heading -->
  				<thead>
  					<tr>
  						<th>&nbsp;</th>
  						<th>
  							Free
  							<span class="ptable-star red">
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star-half-o"></i>
  								<i class="fa fa-star-o"></i>
  							</span>
  							<span class="ptable-price">$0.0</span>
  						</th>
  						<th class="highlight">
  							Basic
  							<span class="ptable-star green">
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star-o"></i>
  							</span>
  							<span class="ptable-price">$99.0</span>
  						</th>
  						<th>
  							Business
  							<span class="ptable-star lblue">
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  								<i class="fa fa-star"></i>
  							</span>
  							<span class="ptable-price">$149.0</span>
  						</th>
  					</tr>
  				</thead>
  				<tbody>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-hdd-o"></i> Storage</span></td>
  						<td>
  							<!-- Icon -->
  							<i class="fa fa-hdd-o red"></i>
  							500 MB
  						</td>
  						<td>
  							<!-- Icon -->
  							<i class="fa fa-hdd-o green"></i>
  							100 GB
  						</td>
  						<td>
  							<!-- Icon -->
  							<i class="fa fa-hdd-o lblue"></i>
  							500 GB
  						</td>
  					</tr>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-signal"></i> Band Width</span></td>
  						<td>
  							<i class="fa fa-signal red"></i>
  							100 TB
  						</td>
  						<td>
  							<i class="fa fa-signal green"></i>
  							500 TB
  						</td>
  						<td>
  							<i class="fa fa-signal lblue"></i>
  							1000 TB
  						</td>
  					</tr>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-shield"></i> Security</span></td>
  						<td>
  							<i class="fa fa-shield red"></i>
  							100% Secure
  						</td>
  						<td>
  							<i class="fa fa-shield green"></i>
  							100% Secure
  						</td>
  						<td>
  							<i class="fa fa-shield lblue"></i>
  							100% Secure
  						</td>
  					</tr>
  					<tr>
  						<td><span class="ptable-title"><i class="fa fa-headphones"></i> Support</span></td>
  						<td>
  							<i class="fa fa-times red"></i>
  							No Support
  						</td>
  						<td>
  							<i class="fa fa-phone green"></i>
  							Phone
  						</td>
  						<td>
  							<i class="fa fa-envelope-o lblue"></i>
  							E-mail / Phone
  						</td>
  					</tr>
  					<!-- Buttons -->
  					<tr>
  						<td>&nbsp;</td>
  						<td class="bg-red"><a class="btn" href="#">Sign Up</a></td>
  						<td class="bg-green"><a class="btn" href="#">Sign Up</a></td>
  						<td class="bg-lblue"><a class="btn" href="#">Sign Up</a></td>
  					</tr>
  				</tbody>
  			</table>
  		</div>
  	</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview