content logo

Bootstrap Tables:

Bootstrap Pricing Table with Color Change

Many websites offer subscription plans for their services and products. These pages need a well-designed page to fully explain the subscription plans and the pricing. This will help the customers choose better and avoids confusion. Like every other section of a website, the pricing page has some important factors to consider as well. For example, the pricing table should only contain the vital information that the client needs to know. Too much information will make the page busy and distracting. It will also make the text seem longer than it should be which might make the users reluctant to read through the whole table. You also want to choose the right number of effects and styles to avoid turning the pricing table into an eye candy but beware, you don’t want the page to look boring either.

In this post, we have a Bootstrap price table effect template that will help you get your website started. It features nice icons and a good hover effect. The price table hover effect makes it so the user knows which plan is currently being selected. Adding this simple pricing table colour change helps avoid a boring page and also provides awareness. You can get this HTML CSS pricing table code from its respective section below.

#

Bootstrap Price Table Effect

#

HTML CSS Pricing Table Effect

#

Pricing Table Color Change

#

Price Table Hover Effect

<!-- This script got from frontendfreecode.com -->
<div class="container bootstrap snippets bootdey">
    <hr>
    <div class="row content">
		<div class="col-lg-10 col-lg-offset-1">
			<div class="col-xs-4 text-center">
				<div class="plan">
					<p class="icon bronze">
						<i class="fa fa-tablet fa-fw"></i>
					</p>
					<h2 class="bronze-text">Bronce</h2>
					<p class="bronze-text price">$12</p>
					<p>Single License</p>
					<p>One Website</p>
					<p>Basic Support</p>
					<a class="btn btn-pricing" href="#" target="_blank">Order Now</a>
				</div>
			</div>
		
			<div class="col-xs-4 text-center">
				<div class="plan featured">
					<p class="icon silver">
						<i class="fa fa-laptop fa-fw"></i>
					</p>
					<h2>Silver</h2>
					<p class="price">$24</p>
					<p>Multiple Licenses</p>
					<p>Unlimited Websites</p>
					<p>Great Support</p>
					<a class="btn btn-pricing" href="#" target="_blank">Order Now</a>
				</div>
			</div>
			
			<div class="col-xs-4 text-center">
				<div class="plan">
					<p class="icon gold">
						<i class="fa fa-desktop fa-fw"></i>
					</p>
					<h2 class="gold-text">Gold</h2>
					<p class="gold-text price">$399</p>
					<p>Extended License</p>
					<p>Unlimited Websites</p>
					<p>Premium Support</p>
					<a class="btn btn-pricing" href="#" target="_blank">Order Now</a>
				</div>
			</div>
		</div>
	</div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body{
	background:#EEEEEE;    
}
 
.bronze {
  background-color: #B0C4DE;
}

.bronze-text {
  color: #B0C4DE;
}

.silver {
  color: #fff;
  background-color: #C0C0C0;
 }
  
.gold {
  color: #fff;
  background-color: #FFD700;
 } 
 
.gold-text {
    color:#FFD700;    
}
  
.content .plan {
    position:relative;
    top:30px;
    background:rgba(255,255,255,1);
    padding-top:40px;
    padding-bottom:40px;
    border-radius:7px;
    color:#777;
    box-shadow:5px 5px 0 rgba(0,0,0,0.05);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.content .plan.featured {
    top:0;
    padding-top:50px;
    padding-bottom:50px;
}

.content .plan:hover,
.content .plan.featured {
    background:#5CC9DF;
    color:#fff;
}

.content .plan h2 {
    font-size:28px;
    font-weight:700;
    margin-bottom:0;
    text-transform:uppercase;
}

.content .plan.featured h2 {
    margin-bottom:10px;
}

.content .plan p {
    margin-bottom:5px;
    font-weight:400;
}

.content .plan .icon {
    display:inline-block;
    margin-bottom:30px;
    width:120px;
    height:120px;
    border-radius:50%;
    font-size:48px;
    line-height:120px;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.content .plan.featured .icon,
.content .plan:hover .icon{
    color:#5cc9df;
    background:#fff;
}

.content .plan .btn-pricing {
    margin-top:20px;
    margin-bottom:0;
    font-size:16px;
    padding:10px 20px;
}

.content .plan.featured .btn-pricing,
.content .plan:hover .btn-pricing {
    background: #fff;
    color:#5CC9DF;
}

.content .plan .price {
    font-size:48px;
    font-weight:100;
    line-height:48px;
    margin-bottom:30px;
}

.content .plan.featured .price {
    margin-bottom:40px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
body{
	background:#EEEEEE;    
}
 
.bronze {
  background-color: #B0C4DE;
}

.bronze-text {
  color: #B0C4DE;
}

.silver {
  color: #fff;
  background-color: #C0C0C0;
 }
  
.gold {
  color: #fff;
  background-color: #FFD700;
 } 
 
.gold-text {
    color:#FFD700;    
}
  
.content .plan {
    position:relative;
    top:30px;
    background:rgba(255,255,255,1);
    padding-top:40px;
    padding-bottom:40px;
    border-radius:7px;
    color:#777;
    box-shadow:5px 5px 0 rgba(0,0,0,0.05);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.content .plan.featured {
    top:0;
    padding-top:50px;
    padding-bottom:50px;
}

.content .plan:hover,
.content .plan.featured {
    background:#5CC9DF;
    color:#fff;
}

.content .plan h2 {
    font-size:28px;
    font-weight:700;
    margin-bottom:0;
    text-transform:uppercase;
}

.content .plan.featured h2 {
    margin-bottom:10px;
}

.content .plan p {
    margin-bottom:5px;
    font-weight:400;
}

.content .plan .icon {
    display:inline-block;
    margin-bottom:30px;
    width:120px;
    height:120px;
    border-radius:50%;
    font-size:48px;
    line-height:120px;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.content .plan.featured .icon,
.content .plan:hover .icon{
    color:#5cc9df;
    background:#fff;
}

.content .plan .btn-pricing {
    margin-top:20px;
    margin-bottom:0;
    font-size:16px;
    padding:10px 20px;
}

.content .plan.featured .btn-pricing,
.content .plan:hover .btn-pricing {
    background: #fff;
    color:#5CC9DF;
}

.content .plan .price {
    font-size:48px;
    font-weight:100;
    line-height:48px;
    margin-bottom:30px;
}

.content .plan.featured .price {
    margin-bottom:40px;
}
</style>

</head>
<body>
<div class="container bootstrap snippets bootdey">
    <hr>
    <div class="row content">
		<div class="col-lg-10 col-lg-offset-1">
			<div class="col-xs-4 text-center">
				<div class="plan">
					<p class="icon bronze">
						<i class="fa fa-tablet fa-fw"></i>
					</p>
					<h2 class="bronze-text">Bronce</h2>
					<p class="bronze-text price">$12</p>
					<p>Single License</p>
					<p>One Website</p>
					<p>Basic Support</p>
					<a class="btn btn-pricing" href="#" target="_blank">Order Now</a>
				</div>
			</div>
		
			<div class="col-xs-4 text-center">
				<div class="plan featured">
					<p class="icon silver">
						<i class="fa fa-laptop fa-fw"></i>
					</p>
					<h2>Silver</h2>
					<p class="price">$24</p>
					<p>Multiple Licenses</p>
					<p>Unlimited Websites</p>
					<p>Great Support</p>
					<a class="btn btn-pricing" href="#" target="_blank">Order Now</a>
				</div>
			</div>
			
			<div class="col-xs-4 text-center">
				<div class="plan">
					<p class="icon gold">
						<i class="fa fa-desktop fa-fw"></i>
					</p>
					<h2 class="gold-text">Gold</h2>
					<p class="gold-text price">$399</p>
					<p>Extended License</p>
					<p>Unlimited Websites</p>
					<p>Premium Support</p>
					<a class="btn btn-pricing" href="#" target="_blank">Order Now</a>
				</div>
			</div>
		</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