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 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS