Pricing Table 2

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">

Small Package

$9.99

per month

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

$19.99

per month

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Lorem Ipsum dolar sit

Large Package

$29.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-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>