"Pricing Table Responsive"
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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" media="all">
<div class="container-fluid">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<p style="margin:0;">YOUR VOD IS JUST A CLICK AWAY !</p>
</div>
<div class="plans col-md-12 col-sm-12 col-xs-12 text-center">
<h5>Plans</h5>
</div>
</div><!--container-fluid close-->
<section>
<div class="container">
<div class="row">
<!-- item -->
<div class="col-md-4 col-sm-4 col-xs-12 text-center">
<div class="panel panel-pricing">
<div class="panel-heading">
<i class="fa fa-windows"></i>
<h3>Plan -1</h3>
</div><!--panel-heading close-->
<div class="panel-body text-center">
<p class="p-title">Subscription Duration</p><!--p-title close-->
<p class="p-time">2 days - 30 Mins</p><!--p-time close-->
</div><!--panel-body text-center close-->
<div class="panel-body text-center">
<p class="p-price">₦ 50.00 </p><!--p-price close-->
<p class="p-tax">All inclusive</p><!--p-tax close-->
</div><!--panel-body text-center close-->
<div class="panel-footer">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*plans css*/
body { background:#efefef;}
.plans {padding: 0 !important;}
.plans h5 {background: #ed1c24;padding: 10px 10px;color: #fff;font-size: 16px;text-transform: uppercase;
letter-spacing: 1px;font-weight: bold;}
.panel-pricing {-moz-transition: all .3s ease;-o-transition: all .3s ease;-webkit-transition: all .3s ease;}
.panel-pricing:hover {box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);}
.panel-pricing .panel-heading {padding:13px 10px;color:#fdfdfd;background-color:#ed1c24;border-color:#ed1c24;}
.panel-pricing .panel-heading .fa {margin-top: 10px;font-size: 58px;}
.panel-pricing .list-group-item {color: #777777;border-bottom: 1px solid rgba(250, 250, 250, 0.5);}
.panel { border:0px solid !important;}
.panel-pricing .panel-body {font-size:40px;padding:10px;margin:0px;border-bottom: 1px solid #cfcfcf;}
.panel-footer { border:0px solid !important;background-color:#fff !important;}
.panel-pricing .panel-heading h3 {margin: 0;padding: 10px;}
p.p-title { font-size:18px;text-align: center;text-transform: capitalize;}
p.p-time { font-size:18px;text-align: center;text-transform: capitalize;}
p.p-price { font-size:18px;text-align: center;text-transform: capitalize;color: #ed1c24;font-weight: bold;}
p.p-tax { font-size:18px;text-align: center;text-transform: capitalize;}
.sub-btn {background: #ed1c24;color: #fff;border-radius: 0px;padding: 5px 8px;}
.sub-btn:hover, .sub-btn:focus { color:#fff; text-decoration:none;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

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

Questions / Comments:

naira!! you coded for a nigerian. i like that :)

Toby Okeke () - 8 years ago - Reply 0