Bootstrap Snippet Pricing Tables using HTML CSS Javascript

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="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="section">
                <div class="section-headlines text-center">
                    <h2>Pricing Plan</h2>
                    <p>Get this HTML template for ridiculously low price and give your awesome app promotion it deserves now.</p>
                </div>
                <div class="row-fluid">
                    <div class="pricing-table row-fluid text-center">
                        <div class="span4">
                            <div class="plan">
                                <div class="plan-name">
                                    <h2>Basic</h2>
                                    <p class="muted">Perfect for small budget</p>
                                </div>
                                <div class="plan-price">
                                    <b>$19</b> / month
                                </div>
                                <div class="plan-details">
                                    <div>
                                        <b>Unlimited</b> Download
                                    </div>
                                    <div>
                                        <b>Free</b> Priority Shipping
                                    </div>
                                    <div>
                                        <b>Unlimited</b> Warranty
                                    </div>
                                </div>
                                <div class="plan-action">
                                    <a href="#" class="btn btn-block btn-large">Choose Plan</a>
                                </div>
                            </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
/*= THEME STYLESHEET
 *
 *  Theme    :   Pricely
 *  Author   :   Ikram Hakimi @ikramhakimi
 *  About    :   Pricing table powered by Twitter Bootstrap
 * 
---------------------------------------------------------------------------------------------- */
/*= OVERWRITE BOOTSTRAP STYLING
---------------------------------------------------------------------------------------------- */
.row-merge {
  width: 100%;
  *zoom: 1;
}
.row-merge:before,
.row-merge:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-merge:after {
  clear: both;
}
.row-merge [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 0%;
  *margin-left: -0.06944444444444445%;
}
.row-merge [class*="span"]:first-child {
  margin-left: 0;
}
.row-merge .controls-row [class*="span"] + [class*="span"] {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
//enable tooltips to proof that JS is working just fine
//hover over the link
$('#example').tooltip('show')
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pricing Tables"
Bootstrap 2.3.2 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Pricing Tables" Bootstrap 2.3.2 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Pricing Tables"
Bootstrap 2.3.2 Snippet by ASDAFF