Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Category
<div class="card stacked text-center">
<div class="card-body">
<i class="icon-link2 icon-boxed icon-boxed-lg mb-3 bg-blue text-white"></i>
<h3 class="card-title mb-1">Domains</h3>
<p class="card-text mb-2">Safely store your ETH and other Ethereum crypto-assets.</p>
<a href="#" class="eyebrow link text-blue">Read More</a>
</div>
</div><div class="card stacked">
<div class="card-body">
<div class="row gutter-2 align-items-center">
<div class="col">
<h3 class="font-weight-normal mb-2">Domains</h3>
<ul class="list-group list-group-minimal">
<li class="list-group-item"><a href="" class="link">Adding DNS records and templates</a></li>
<li class="list-group-item"><a href="" class="link">Adding POP or IMAP server setting to an email client</a></li>
<li class="list-group-item"><a href="" class="link">Changing nameservers for DNS management</a></li>
</ul>
<a href="" class="action mt-1 text-blue">View All</a>
</div>
</div>
<i class="icon-link2 icon-background text-blue"></i>
</div>
</div>Pricing
$49
Small
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Unlimited Team Members
- Support for one year
- Access to updates
- 24/7 Call Support
<div class="card stacked mt-3">
<div class="card-header pt-0">
<span class="card-price">$49</span>
<h3 class="card-title mt-3 mb-1">Small</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="card-body">
<ul class="list-group list-group-minimal mb-3">
<li class="list-group-item d-flex justify-content-between align-items-center">Unlimited Team Members
<i class="icon-check2 text-green fs-20"></i>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Support for one year
<i class="icon-check2 text-green fs-20"></i>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Access to updates
<i class="icon-check2 text-green fs-20"></i>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">24/7 Call Support
<i class="icon-check2 text-green fs-20"></i>
</li>
</ul>
<a href="" class="btn btn-block btn-primary">Buy Now</a>
</div>
</div>Card with tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe delectus praesentium voluptatum itaque dignissimos possimus corporis aliquam iste, cum porro amet architecto, facilis impedit. Quaerat dolores sed facilis, suscipit quis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nulla, quo porro eum ratione expedita at quia fugit magni impedit. Adipisci cumque blanditiis officiis deserunt, necessitatibus hic earum excepturi laborum.
<div class="card">
<div class="card-header no-border bg-white pb-0">
<ul class="nav nav-pills card-header-pills lavalamp" id="tab-1" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-1-1" role="tab" aria-controls="tab-1-1" aria-selected="true">Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-1-2" role="tab" aria-controls="tab-1-2" aria-selected="false">HTML</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="tab-1-content">
<div class="tab-pane fade show active" id="tab-1-1" role="tabpanel" aria-labelledby="tab-1-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe delectus praesentium voluptatum itaque dignissimos possimus corporis aliquam iste, cum porro amet architecto, facilis impedit. Quaerat dolores sed facilis, suscipit quis.</p>
</div>
<div class="tab-pane fade" id="tab-1-2" role="tabpanel" aria-labelledby="tab-1-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nulla, quo porro eum ratione expedita at quia fugit magni impedit. Adipisci cumque blanditiis officiis deserunt, necessitatibus hic earum excepturi laborum.</p>
</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe delectus praesentium voluptatum itaque dignissimos possimus corporis aliquam iste, cum porro amet architecto, facilis impedit. Quaerat dolores sed facilis, suscipit quis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nulla, quo porro eum ratione expedita at quia fugit magni impedit. Adipisci cumque blanditiis officiis deserunt, necessitatibus hic earum excepturi laborum.
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs nav-justified card-header-tabs lavalamp" id="tab-2" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-2-1" role="tab" aria-controls="tab-2-1" aria-selected="true">Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-2-2" role="tab" aria-controls="tab-2-2" aria-selected="false">HTML</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="tab-2-content">
<div class="tab-pane fade show active" id="tab-2-1" role="tabpanel" aria-labelledby="tab-2-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe delectus praesentium voluptatum itaque dignissimos possimus corporis aliquam iste, cum porro amet architecto, facilis impedit. Quaerat dolores sed facilis, suscipit quis.</p>
</div>
<div class="tab-pane fade" id="tab-2-2" role="tabpanel" aria-labelledby="tab-2-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nulla, quo porro eum ratione expedita at quia fugit magni impedit. Adipisci cumque blanditiis officiis deserunt, necessitatibus hic earum excepturi laborum.</p>
</div>
</div>
</div>
</div>Location
<a href="" class="card card-background">
<div class="image" style="background-image: url(../../assets/images/office-1.jpg)"></div>
<div class="card-body pt-10 my-10 text-center">
<h3 class="card-title mb-0">Barcelona</h3>
<p class="card-text">434 Broadway, Floor 3 New York NY 10013 United States</p>
</div>
</a>