Pricing Table

A pricing table using bootstrap 4 cards.


Small

$9.99 / Per Month

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Medium

$19.99 / Per Month

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Lorem ipsum

Large

$39.99 / Per Month

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

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>