"BS4 Simple & Clean Pricing table "
Bootstrap 4.1.1 Snippet by mylastof

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 ---------->
<div class="container mb-5 mt-5">
<div class="pricing card-deck flex-column flex-md-row mb-3">
<div class="card card-pricing text-center px-3 mb-4">
<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Starter</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
<div class="card-body pt-0">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<button type="button" class="btn btn-outline-secondary mb-3">Order now</button>
</div>
</div>
<div class="card card-pricing popular shadow text-center px-3 mb-4">
<span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Professional</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">6</span><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
<div class="card-body pt-0">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support on Github</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul>
<a href="https://www.totoprayogo.com" target="_blank" class="btn btn-primary mb-3">Order Now</a>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
.card-pricing.popular {
z-index: 1;
border: 3px solid #007bff;
}
.card-pricing .list-unstyled li {
padding: .5rem 0;
color: #6c757d;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: