" "Responsive Price Table""
Bootstrap 4.1.1 Snippet by Pawan Pandey

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<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>
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

Vue Paper Dashboard 2 PRO
Login Class="Gabriel"
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments:

Hi There,

We are having issues with our pricing table with the link below https://www.dtapclinic.com/hiv/hiv-testing/ and its not mobile responsive. Please have a look this link with mobile devices

We are looking for some solution if there is any possibility to fix this on mobile devices. We are using wordpress by the way. Looking forward to the suggestions.

Thanks.

robkesper () - 6 years ago - Reply 0