Pricing table

This bootstrap snippet called "Pricing table " was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: tables,prices,information,bootstrap,snippet

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container bootstrap snippet">
    <hr>
    <div class="row content">
		<div class="col-lg-10 col-lg-offset-1">
			<div class="col-sm-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-sm-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-sm-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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 20th 2014, 23:24

Views: 7.3K

Rated 5/5 based on 3 reviews