"Responsive Price Table"
Bootstrap 3.3.0 Snippet by vsantiago113sec@gmail.com

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row row-flex">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="price-table pt-bg-black">
<div>
<span>basic</span>
<span>Price $99.99/mo</span>
<span>Features included!</span>
</div>
<ul>
<li>Domain name</li>
<li>Social Media Integration</li>
<li>First Month Hosting</li>
<li>On Page SEO</li>
<li>24/6 Support</li>
</ul>
<a href="#">purchase</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="price-table pt-bg-green">
<div>
<span>basic</span>
<span>Price $99.99/mo</span>
<span>Features included!</span>
</div>
<ul>
<li>Domain name</li>
<li>Social Media Integration</li>
<li>First Month Hosting</li>
<li>On Page SEO</li>
<li>24/6 Support</li>
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
/* PRICE TABLE */
.row-flex {
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
}
.price-table {
max-width: 400px;
min-height: 320px;
background-color: #fff;
border-radius: 0 0 0 25px;
border: 1px solid #ccc;
box-shadow: 5px 5px 8px #ccc;
display: block;
margin: 10px auto;
padding: 0 0 8px 0;
text-align: center;
}
.price-table span {
display: block;
}
.price-table span:first-child {
padding: 16px 0 0 0;
font-size: 2em;
text-transform: uppercase;
font-weight: bold;
}
.price-table span:nth-child(2) {
padding: 0 0 16px 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: