"Responsive Feature Comparison Table"
Bootstrap 3.0.0 Snippet by ricbwood

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="//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">
<h2>Feature Comparison Table</h2>
<div class="row feature-table">
<div class="col-sm-3 feature-block th1">
<div class="feature-table-icon feature-table-icon-1">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#fff"/></svg>
<!-- <img class="img-responsive img-circle" src="/img/testimonials/Merel-Keuning-min.jpg" alt="Merel Keuning at MK Reflexology"> -->
</div>
<div class="price">£<span>35</span></div>
<div class="price-int">per hour</div>
<h3>PAYG</h3>
<p>Feature 1</p>
<p>Feature 2</p>
<p>Feature 3</p>
<p>-</p>
<p>-</p>
<p>-</p>
</div>
<div class="col-sm-3 feature-block th2">
<div class="feature-table-icon feature-table-icon-2">
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z" fill="#fff"/></svg>
</div>
<div class="price">£<span>30</span></div>
<div class="price-int">per month</div>
<h3>Basic</h3>
<p>Feature 1</p>
<p>Feature 2</p>
<p>Feature 3</p>
<p>Feature 4</p>
<p>-</p>
<p>-</p>
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
.feature-table .feature-block {
/*flex: 1;*/
background-color: #476481;
color: #fff;
padding: 40px;
text-align: center;
}
@media(min-width:768px){
.feature-table {
display: flex;
}
.feature-table .feature-block {
flex: 1;
}
}
.feature-table h3 {
color: #fff;
font-size: 24px;
font-weight: 700;
}
.feature-table .th1 {
background-color: #476481;
}
.feature-table .th2 {
background-color: #3e5871;
}
.feature-table .th3 {
background-color: #354b60;
}
.feature-table .th4 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: