Bootstrap Snippet Pricing Tables 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="//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 ---------->
<!--
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
-->
<div class="container content">
    <div class="row">
        <!-- Pricing -->
        <div class="col-md-3">
            <div class="pricing hover-effect">
                <div class="pricing-head">
                    <h3>Begginer <span>
                    Officia deserunt mollitia </span>
                    </h3>
                    <h4><i>$</i>5<i>.49</i>
                    <span>
                    Per Month </span>
                    </h4>
                </div>
                <ul class="pricing-content list-unstyled">
                    <li>
                        At vero eos
                    </li>
                    <li>
                        No Support
                    </li>
                    <li>
                        Fusce condimentum
                    </li>
                    <li>
                        Ut non libero
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
/***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/
/***
Content
***/
.content {
    padding: 30px 0;
}
/***
Pricing table
***/
.pricing {
  position: relative;
  margin-bottom: 15px;
  border: 3px solid #eee;
}
.pricing-active {
  border: 3px solid #36d7ac;
  margin-top: -10px;
  box-shadow: 7px 7px rgba(54, 215, 172, 0.2);
}
.pricing:hover {
  border: 3px solid #36d7ac;
}
.pricing:hover h4 {
  color: #36d7ac;
}
.pricing-head {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pricing Tables"
Bootstrap 3.3.0 Snippet by keenthemes

Related: See More

Questions / Comments:

"Pricing Tables" Bootstrap 3.3.0 Snippet by keenthemes

Related: See More

Questions / Comments:

"Pricing Tables"
Bootstrap 3.3.0 Snippet by keenthemes