A pricing table using bootstrap 4 cards. (Alternative Design)
Font Awesome Required for checkmark in lists
Code:
<link rel="stylesheet" href="../../css/font-awesome.min.css">
per month
per month
per month
Code:
<div class="row">
<div class="col">
<br>
<div class="card bg-primary text-white">
<div class="card-header">
<div class="text-center">Small Package</div>
</div>
<div class="card-body">
<h2 class="display-3 text-center">$9.99</h2>
<p class="card-text text-center">per month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-primary">
<i class="fa fa-check" aria-hidden="true"></i>
Cras justo odio
</li>
<li class="list-group-item list-group-item-primary">
<i class="fa fa-check" aria-hidden="true"></i>
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-primary">
<i class="fa fa-check" aria-hidden="true"></i>
Vestibulum at eros
</li>
</ul>
<div class="card-body">
<button class="btn btn-primary btn-block">Buy Now</button>
</div>
</div>
</div>
<div class="col">
<div class="card bg-success text-white">
<div class="card-header">
<div class="text-center">Medium Package</div>
</div>
<div class="card-body">
<h2 class="display-3 text-center">$19.99</h2>
<p class="card-text text-center">per month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-success">
<i class="fa fa-check" aria-hidden="true"></i>
Cras justo odio
</li>
<li class="list-group-item list-group-item-success">
<i class="fa fa-check" aria-hidden="true"></i>
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-success">
<i class="fa fa-check" aria-hidden="true"></i>
Vestibulum at eros
</li>
<li class="list-group-item list-group-item-success">
<i class="fa fa-check" aria-hidden="true"></i>
Lorem Ipsum dolar sit
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-block">Buy Now</button>
</div>
</div>
</div>
<div class="col">
<br>
<div class="card bg-danger text-white">
<div class="card-header">
<div class="text-center">Large Package</div>
</div>
<div class="card-body">
<h2 class="display-3 text-center">$29.99</h2>
<p class="card-text text-center">per month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-danger">
<i class="fa fa-check" aria-hidden="true"></i>
Cras justo odio
</li>
<li class="list-group-item list-group-item-danger">
<i class="fa fa-check" aria-hidden="true"></i>
Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-danger">
<i class="fa fa-check" aria-hidden="true"></i>
Vestibulum at eros
</li>
</ul>
<div class="card-body">
<button class="btn btn-danger btn-block">Buy Now</button>
</div>
</div>
</div>
</div>