Cards
Please follow this link to view all bootstrap 4 framework classes
<div class="card">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card m-raised">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card">
<div class="card-header">
Card header
</div>
<div class="card-body m-xl-3">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card bg-light">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
Background and color
<div class="card text-white bg-primary">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card text-white bg-secondary">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card text-white bg-success">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card text-white bg-danger">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card text-white bg-warning">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card text-white bg-info">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card text-white bg-dark">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
Shadow
<div class="card box-shadow">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card box-shadow-sm">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card box-shadow-md">
<div class="card-header">
Card header
</div>
<div class="card-body m-xl-3">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card box-shadow-lg">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card box-shadow-xl">
<div class="card-header">
Card header
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
Card footer
</div>
</div>
Text alignment
<div class="card">
<div class="card-body">
<h5 class="card-title">
Card Title
</h5>
<p class="card-text">
...
</p>
<a href="#" class="btn btn-primary">Submit</a>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">
Card Title
</h5>
<p class="card-text">
...
</p>
<a href="#" class="btn btn-primary">Submit</a>
</div>
</div>
<div class="card text-right">
<div class="card-body">
<h5 class="card-title">
Card Title
</h5>
<p class="card-text">
...
</p>
<a href="#" class="btn btn-primary">Submit</a>
</div>
</div>
Navigation
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
...
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
...
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Image overlays
<div class="card bg-dark text-white">
<img class="card-img" src="..." alt="
Card image
">
<div class="card-img-overlay">
<h5 class="card-title text-white">Card title</h5>
<p class="card-text">
...
</p>
<p class="card-text">
...
</p>
</div>
</div>
