A pricing table using bootstrap 4 cards.
$9.99 / Per Month
$19.99 / Per Month
$39.99 / Per Month
Code:
<div class="row">
<div class="col">
<br>
<div class="card bg-primary text-white">
<div class="card-body">
<h4 class="card-title">Small</h4>
<p class="card-text">$9.99 / Per Month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-primary">Cras justo odio</li>
<li class="list-group-item list-group-item-primary">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">Vestibulum at eros</li>
</ul>
<div class="card-body">
<button class="btn btn-light btn-block">Buy Now</button>
</div>
</div>
</div>
<div class="col">
<div class="card bg-success text-white">
<div class="card-body">
<h4 class="card-title">Medium</h4>
<p class="card-text">$19.99 / Per Month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-success">Cras justo odio</li>
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">Vestibulum at eros</li>
<li class="list-group-item list-group-item-success">Lorem ipsum</li>
</ul>
<div class="card-body">
<button class="btn btn-light btn-block">Buy Now</button>
</div>
</div>
</div>
<div class="col">
<br>
<div class="card bg-danger text-white">
<div class="card-body">
<h4 class="card-title">Large</h4>
<p class="card-text">$39.99 / Per Month</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-danger">Cras justo odio</li>
<li class="list-group-item list-group-item-danger">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="card-body">
<button class="btn btn-light btn-block">Buy Now</button>
</div>
</div>
</div>
</div>