Bootstrap Snippet Pricing tables, membership plans using HTML CSS

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="table-responsive">
        <div class="membership-pricing-table">
            <table>
                <tbody><tr>
                    <th></th>
                    <th class="plan-header plan-header-free">
                <div class="pricing-plan-name">FREE</div>
                <div class="pricing-plan-price">
                    <sup>$</sup>0<span>.00</span>
                </div>
                <div class="pricing-plan-period">month</div>
                </th>
                <th class="plan-header plan-header-blue">
                <div class="pricing-plan-name">BASIC</div>
                <div class="pricing-plan-price">
                    <sup>$</sup>4<span>.99</span>
                </div>
                <div class="pricing-plan-period">month</div>
                </th>
                <th class="plan-header plan-header-blue">
                <div class="pricing-plan-name">PLUS</div>
                <div class="pricing-plan-price">
                    <sup>$</sup>12<span>.95</span>
                </div>
                <div class="pricing-plan-period">month</div>
                </th>
                <th class="plan-header plan-header-standard">
                <div class="header-plan-inner">
                    <!--<span class="plan-head">·</span>-->
                    <span class="recommended-plan-ribbon">RECOMMENDED</span>
                    <div class="pricing-plan-name">STANDARD</div>
                    <div class="pricing-plan-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
.membership-pricing-table {
    width: 920px
}
.membership-pricing-table table .icon-no,.membership-pricing-table table .icon-yes {
    font-size: 22px
}
.membership-pricing-table table .icon-no {
    color: #a93717
}
.membership-pricing-table table .icon-yes {
    color: #209e61
}
.membership-pricing-table table .plan-header {
    text-align: center;
    font-size: 48px;
    border: 1px solid #e2e2e2;
    padding: 25px 0
}
.membership-pricing-table table .plan-header-free {
    background-color: #eee;
    color: #555
}
.membership-pricing-table table .plan-header-blue {
    color: #fff;
    background-color: #61a1d1;
    border-color: #3989c6
}
.membership-pricing-table table .plan-header-standard {
    color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pricing tables, membership plans"
Bootstrap 3.3.0 Snippet by arboshiki

Related: See More

Questions / Comments:

"Pricing tables, membership plans" Bootstrap 3.3.0 Snippet by arboshiki

Related: See More

Questions / Comments:

"Pricing tables, membership plans"
Bootstrap 3.3.0 Snippet by arboshiki