Bootstrap Snippet Pricing Table using HTML CSS Bootstrap

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/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
    
        <div class="col-xs-12 col-sm-6 col-md-3"> 
            <!-- Price Table Item -->
            <div class="price-table text-center">
                <div class="price-table-heading">
                    <p>Match2Lists</p>
                     <p>BASIC PLAN</p>
                </div>
                <div class="price-table-body">
                    
                    <p class="value">$95<small>/month</small></p>
                    <p><small>Billed Annually</small></p>
                </div>
                <ul class="list-group">
                    <p class="list-group-item-w">1 User</p>
                    <p class="list-group-item-g">Unlimited Projects</p>
                    <p class="list-group-item-w">25K Records Max List Size</p>
                    <p class="list-group-item-g">Match, Merge, De-Dupe</p>
                    <p class="list-group-item-w">-</p>
                    <p class="list-group-item-g">-</p>
                    <p class="list-group-item-w">-</p>
                    <p class="list-group-item-g">-</p>
                    <p class="list-group-item-w"><small>Active Lists: 10</small></p>
                    <p class="list-group-item-g"><small>Active Projects: 10</small></p>
                    <p class="list-group-item-w"><small>List/Project Expiry: 30 Days</small></p>
                    <p class="list-group-item-g">-</p>
                </ul>
                <div class="price-table-footer"> <a class="btn btn-lg btn-success" href=/features/pricing/limited-small-data-plan>Get Started</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
body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 28px;
}
.main-title {
    font-weight: 700;
    text-align: center;
    margin: 50px 0;
}
.margin-bottom-20 {
    margin-bottom: 20px;
}
.margin-bottom-50 {
    margin-bottom: 50px;
}
/* =================================
Price Table
================================= */ 
.price-table {
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 7px solid #eeeeee;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.price-table:hover {
    background: rgb(0,0,0, .03);
    border-color: #77b258;
}
.price-table .price-table-heading {
    color: #333333;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pricing Table"
Bootstrap 3.0.0 Snippet by Seotek

Related: See More

Questions / Comments:

"Pricing Table" Bootstrap 3.0.0 Snippet by Seotek

Related: See More

Questions / Comments:

"Pricing Table"
Bootstrap 3.0.0 Snippet by Seotek