simple pricing table

This bootstrap snippet called "simple 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: html,table

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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-sm-6 col-md-4">
        	<div class="panel plan">
        		<div class="panel-body">
        			<span class="plan-title">Personal</span>
        			<p class="text-semibold text-mint">$99/year</p>
        			<div class="plan-icon">
        				<i class="fa fa-mobile-phone"></i>
        			</div>
        
        			<p class="text-muted pad-btm">
        				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        			</p>
        			<button class="btn btn-block btn-primary btn-lg">Choose</button>
        		</div>
        	</div>
        </div>
        <div class="col-sm-6 col-md-4">
        	<div class="panel plan">
        		<div class="panel-body">
        			<span class="plan-title">Premium</span>
        			<p class="text-semibold text-mint">$299/year</p>
        			<div class="plan-icon">
        				<i class="fa fa-laptop"></i>
        			</div>
        
        			<p class="text-muted pad-btm">
        				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        			</p>
        			<button class="btn btn-block btn-success btn-lg">Choose</button>
        		</div>
        	</div>
        </div>
        <div class="col-sm-6 col-md-4">
        	<div class="panel plan">
        		<div class="panel-body">
        			<span class="plan-title">Enterprise</span>
        			<p class="text-semibold text-mint">$399/year</p>
        			<div class="plan-icon">
        				<i class="fa fa-desktop"></i>
        			</div>
        
        			<p class="text-muted pad-btm">
        				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        			</p>
        			<button class="btn btn-block btn-warning btn-lg">Choose</button>
        		</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:#eee;
    margin-top:20px;
}

.panel {
  box-shadow: 0 2px 0 rgba(0,0,0,0.05);
  border-radius: 0;
  border: 0;
  margin-bottom: 24px;
}

.panel-body {
  padding: 25px 20px;
}

.plan {
  text-align: center;
}

.plan .plan-icon {
  font-size: 7em;
  color: rgba(0,0,0,0.1);
}

.plan .plan-title {
  font-size: 2em;
  font-weight: 100;
}

.text-mint {
  color: #2b866e;
}

.plan .btn{
    border-radius:0px;    
}

.text-muted{
  color: #606060;
}

.pad-btm {
  padding-bottom: 15px;
}

.text-semibold {
  font-weight: 600;
}

.details {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.75)),color-stop(62%,rgba(0,0,0,.36)),color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom,rgba(0,0,0,.75) 0,rgba(0,0,0,.36) 62%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e000000', endColorstr='#00000000', GradientType=0);
  top: -10;
  display: block;
  height: 70px;
  padding: 10px 15px 0;
  position: relative;
  width: 100%;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 30th 2015, 23:39

Views: 360