HTML code
This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css" />
<div class="row margin-b-30">
<div class="large-3 columns margin-b-30 fadeInLeft animated">
<div class="price-box">
<h3>Support </h3>
<h4>free<span>Life time</span></h4>
<ul class="list-unstyled">
<li><i class="fa fa-tags"></i> At verso perso</li>
<li><i class="fa fa-cogs"></i> Basic support</li>
<li><i class="fa fa-heart"></i> accumbad nurso</li>
<li><i class="fa fa-star"></i> consuct elit amet</li>
<li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor .
</p>
<a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a>
</div>
</div><!--col-->
<div class="large-3 columns margin-b-30 fadeInLeft animated">
<div class="price-box popular">
<h3>Single </h3>
<h4><sup>$</sup>18.00<span>Per Month</span></h4>
<ul class="list-unstyled">
<li><i class="fa fa-tags"></i> At verso perso</li>
<li><i class="fa fa-cogs"></i> Basic support</li>
<li><i class="fa fa-heart"></i> accumbad nurso</li>
<li><i class="fa fa-star"></i> consuct elit amet</li>
<li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor .
</p>
<a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a>
</div>
</div><!--col-->
<div class="large-3 columns margin-b-30 fadeInLeft animated">
<div class="price-box">
<h3>Multiple </h3>
<h4><sup>$</sup>99.99<span>Per Month</span></h4>
<ul class="list-unstyled">
<li><i class="fa fa-tags"></i> At verso perso</li>
<li><i class="fa fa-cogs"></i> Basic support</li>
<li><i class="fa fa-heart"></i> accumbad nurso</li>
<li><i class="fa fa-star"></i> consuct elit amet</li>
<li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor .
</p>
<a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a>
</div>
</div><!--col-->
<div class="large-3 columns margin-b-30 fadeInLeft animated">
<div class="price-box">
<h3>Extended </h3>
<h4><sup>$</sup>799<span>Per Month</span></h4>
<ul class="list-unstyled">
<li><i class="fa fa-tags"></i> At verso perso</li>
<li><i class="fa fa-cogs"></i> Basic support</li>
<li><i class="fa fa-heart"></i> accumbad nurso</li>
<li><i class="fa fa-star"></i> consuct elit amet</li>
<li><i class="fa fa-shopping-cart"></i> nota idlia aremd</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna psum olor .
</p>
<a href="#" class="button success">Purchase Now <i class="fa fa-shopping-cart"></i></a>
</div>
</div><!--col-->
</div>CSS code
This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection
body{margin-top:20px;}
/*********
Pricing tables
**********/
.price-box{
box-shadow: 1px 2px 15px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 2px 15px rgba(0,0,0,0.2);
transition: all 0.3s;
-webkit-transition: all 0.3s;
text-align: center;
padding-bottom: 20px;
border: 1px solid #ddd;
}
.price-box.popular h3{
background-color: #7bae17;
color:#fff;
}
.price-box:hover{
box-shadow: none;
-webit-box-shadow: none;
}
.price-box h3{
color:#000;
background-color: #f5f5f5;
text-transform: uppercase;
padding: 20px;
margin-bottom: 0px;
font-weight: 700;
}
.price-box h4{
font-size: 40px;
font-weight: 700;
background-color: #fff;
padding: 10px;
}
.price-box h4 sup, .price-box h4 sub{
font-size: 12px;
}
.price-box h4 sup{
vertical-align: top;
top: 9px;
font-weight: 400;
}
.price-box h4 sub{
vertical-align: bottom;
bottom: 7px;
left: -9px;
font-weight: 400;
}
.price-box h4 span{
display: block;
font-size: 13px;
color:#7bae17;
font-weight: 600;
margin-top: 5px;
}
.price-box ul{
text-align: left;
}
.price-box ul li{
padding: 8px 25px;
font-weight: 400;
border-bottom: 1px solid #eee;
}
.price-box ul li i{
color:#7bae17;
margin-right: 10px;
}
.price-box p{
padding: 20px 25px;
font-size: 12px;
line-height: 18px;
}
/**dark price**/
.price-box.dark{
background-color: #344154;
}
.price-box.dark h4, .price-box.dark h3{
color:#fff;
background-color: #344154;
}
.price-box.dark.popular h3{
background-color: #7bae17;
}
.price-box.dark ul li{
border-bottom-color:rgba(255,255,255,0.1);
color:#aaa;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}