"Responsive pricing table"
Bootstrap 3.3.0 Snippet by alexkval

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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="panel text-center price-panel panel-grey">
<div class="panel-heading">
<h3>FREE PLAN</h3>
</div>
<div class="panel-body">
<p class="lead big-lead"><strong>$0 / month</strong></p>
</div>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Personal use only</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> Unlimited projects</li>
<li class="list-group-item"><i class="fa fa-times text-danger"></i> 27/7 support</li>
</ul>
<div class="panel-footer">
<a href="#" class="btn btn-lg btn-block btn-default">BUY NOW!</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="panel text-center price-panel panel-blue">
<div class="panel-heading">
<h3>STARTER PLAN</h3>
</div>
<div class="panel-body">
<p class="lead big-lead"><strong>$10 / month</strong></p>
</div>
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
body {
padding-top: 50px;
padding-bottom: 50px;
}
.big-lead {
font-size: 40px;
}
.price-panel,
.price-panel > .panel-heading {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.price-panel:hover {
box-shadow: 0 0 30px rgba(0,0,0, .2);
}
.price-panel:hover > .panel-heading {
box-shadow: 0 0 30px rgba(0,0,0, .2) inset;
}
.price-panel > .panel-heading {
color: white;
text-shadow: 0 3px 0 rgba(50,50,50, .6);
border-radius: 0;
box-shadow: 0 5px 0 rgba(50,50,50, .2) inset;
}
.price-panel > .panel-body {
color: white;
text-shadow: 0 3px 0 rgba(50,50,50, .3);
}
.price-panel > .list-group {
font-weight: 600;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular
BS4 Simple & Clean Pricing table
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments:

This is the kind of support that I'm looking for! 27 hours a day, 7 days a week!

Jimbo () - 7 years ago - Reply 0