"beautiful pricing table"
Bootstrap 3.3.0 Snippet by Gurmeet Singh

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="columns">
<ul class="price">
<li class="header">Basic</li>
<li class="grey">$ 9.99 / year</li>
<li class="highlight">10GB Storage</li>
<li class="highlight">10 Emails</li>
<li class="highlight">10 Domains</li>
<li class="highlight">1GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Subscribe</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="columns">
<ul class="price">
<li class="header">Pro</li>
<li class="grey">$ 24.99 / year</li>
<li class="highlight">25GB Storage</li>
<li class="highlight" class="highlight">25 Emails</li>
<li class="highlight">25 Domains</li>
<li class="highlight">2GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Subscribe</a></li>
</ul>
</div></div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="columns">
<ul class="price">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
box-sizing: border-box;
}
.columns {
margin-bottom:20px;
cursor:pointer;
}
.columns:hover .header { background-color:red;border-top-left-radius: 20px;
border-top-right-radius: 20px;}
.columns:hover .button{ background-color:red;}
.columns:hover .grey {font-size:30px; color:#4CAF50; }
.columns:hover .price { color:red;border-top-left-radius: 20px;border-top-right-radius: 20px;}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
overflow: hidden;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
transition: all .2s ease-in-out;
}
.price li {
border-bottom: 1px solid #eee;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Kit
BS4 Simple & Clean Pricing table
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments: