Style 1
Starter
Premium
Enterprise
<section id="dt-content" class="sec-pt-lg">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Style 1</h2>
<div class="row row-cols-1 row-cols-lg-3 text-center">
<div class="col">
<div class="card card-pricing-plan1">
<div class="card-header">
<h3>Starter</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title"><span class="symbol">$</span>29</h4>
<ul class="list-unstyled">
<li>Access to 25 courses</li>
<li>Private sessions</li>
<li class="text-muted">Offline Viewing</li>
<li>Certificates</li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Purchase Now</button>
</div>
</div>
</div>
<div class="col">
<div class="card card-pricing-plan1 card-recommended">
<div class="card-header">
<h3>Premium</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title"><span class="symbol">$</span>49</h4>
<ul class="list-unstyled">
<li>Access to 25 courses</li>
<li>Private sessions</li>
<li>Offline Viewing</li>
<li>Certificates</li>
</ul>
<button type="button" class="btn btn-secondary btn-lg">Purchase Now</button>
</div>
</div>
</div>
<div class="col">
<div class="card card-pricing-plan1">
<div class="card-header">
<h3>Enterprise</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title"><span class="symbol">$</span>69</h4>
<ul class="list-unstyled">
<li>Access to 25 courses</li>
<li>Private sessions</li>
<li>Offline Viewing</li>
<li>Certificates</li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Purchase Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Style 2
Plan 1
Starter
$29
- Access to 25 courses
- Private sessions
- Offline Viewing
- Certificates
Plan 2
Premium
$49
- Access to 25 courses
- Private sessions
- Offline Viewing
- Certificates
Plan 3
Enterprise
$69
- Access to 25 courses
- Private sessions
- Offline Viewing
- Certificates
<section id="dt-content" class="sec-pt-lg">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Style 2</h2>
<div class="row row-cols-1 row-cols-lg-3 text-center">
<div class="col">
<div class="card card-pricing-plan2">
<div class="card-header">
<div class="badge">Plan 1</div>
<h3>Starter</h3>
<h4><span class="symbol">$</span>29</h4>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li>Access to 25 courses</li>
<li>Private sessions</li>
<li class="text-muted">Offline Viewing</li>
<li>Certificates</li>
</ul>
<button type="button" class="btn btn-outline-primary btn-lg">Purchase Now</button>
</div>
</div>
</div>
<div class="col">
<div class="card card-pricing-plan2 card-recommended">
<div class="card-header">
<div class="badge">Plan 2</div>
<h3>Premium</h3>
<h4><span class="symbol">$</span>49</h4>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li>Access to 25 courses</li>
<li>Private sessions</li>
<li>Offline Viewing</li>
<li>Certificates</li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Purchase Now</button>
</div>
</div>
</div>
<div class="col">
<div class="card card-pricing-plan2">
<div class="card-header">
<div class="badge">Plan 3</div>
<h3>Enterprise</h3>
<h4><span class="symbol">$</span>69</h4>
</div>
<div class="card-body">
<ul class="list-unstyled">
<li>Access to 25 courses</li>
<li>Private sessions</li>
<li>Offline Viewing</li>
<li>Certificates</li>
</ul>
<button type="button" class="btn btn-outline-primary btn-lg">Purchase Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>