"Cleaning Service Pricing Table"
Bootstrap 3.0.0 Snippet by Anita26

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">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="price-head">
<h3> House Cleaning</h3>
</div>
<div class="price-block">
<div class="price-content">
<h4>Kitchen & Bedrooms</h4>
<div class="price-text">
<p>$28/<small style="font-size: 10px;"> hour</small></p>
</div>
<ul>
<li>Wipe Cabinets</li>
<li>Wipes Tops</li>
<li>Dust Tops of Cabinets</li>
</ul>
</div>
<div class="price-content">
<h4>Bathroom</h4>
<div class="price-text">
<p>$29/ <small style="font-size: 10px;">hour</small></p>
</div>
<ul>
<li>Dust Counters</li>
<li>Dust Light</li>
<li>Wipe Countertops</li>
</ul>
</div>
<div class="price-content">
<h4>Living Room</h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.price-block { border: 1px solid #e5eae8; background-color: #fff; padding: 40px; margin-bottom: 30px; border-radius: 0px 0px 5px 5px; margin-top: -1px; }
.price-head { background-color: #f0f4f2; padding: 4px 0px 15px 30px; border-radius: 5px 5px 0px 0px; border: 1px solid #e5eae8; }
.price-block ul {padding:0; list-style:none; border-bottom: 1px #d7dcda dashed; margin-bottom: 16px; margin-top: 15px; padding-bottom: 16px; }
.price-block ul li { color: #676462; line-height: 24px; font-size: 13px; font-weight: 500; }
.price-content { position: relative; }
.price-text { color: #272625; position: absolute; font-weight: 500; top: -2px; right: 0px; }
.btn { font-family: 'Poppins', sans-serif; font-size: 13px; text-transform: uppercase; font-weight: 700; padding: 14px 24px; margin-bottom: 4px; letter-spacing: 1.4px; border-radius: 50px; line-height: 1.6; border: transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; }
.btn-primary { background-color: #fb6a30; color: #fff; }
.btn-primary:hover { background-color: #ea5c24; color: #fff; }
.btn-primary.focus, .btn-primary:focus { background-color: #ea5c24; color: #fff; }
.btn-default { background-color: #32c083; color: #fff; }
.btn-default:hover { background-color: #1c9e66; color: #fff; }
.btn-default.focus, .btn-default:focus { background-color: #1c9e66; color: #fff; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Dark Edition
BS4 Simple & Clean Pricing table
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments: