Bootstrap Cards - Soft UI Dashboard
Discover 6 Bootstrap Cards available in Soft UI Dashboard
Card Illustration
Component from
Soft UI Dashboard
Builder
<div class="card draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-lg-6">
<div class="d-flex flex-column h-100">
<p class="mb-1 pt-2 text-bold">Built by developers</p>
<h5 class="font-weight-bolder">Soft UI Dashboard</h5>
<p class="mb-5">From colors, cards, typography to complex elements, you will find the full documentation.</p>
<a class="text-body text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
Read More
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="col-lg-5 ms-auto text-center mt-5 mt-lg-0">
<div class="bg-gradient-primary border-radius-lg h-100">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/shapes/waves-white.svg" class="position-absolute h-100 w-50 top-0 d-lg-block d-none" alt="waves">
<div class="position-relative d-flex align-items-center justify-content-center h-100">
<img class="w-100 position-relative z-index-2 pt-4" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/illustrations/rocket-white.png">
</div>
</div>
</div>
</div>
</div>
</div>Card Image
Component from
Soft UI Dashboard
Builder
<div class="card h-100 p-3 draggable">
<div class="overflow-hidden position-relative border-radius-lg bg-cover h-100" style="background-image: url(https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg);">
<span class="mask bg-gradient-dark"></span>
<div class="card-body position-relative z-index-1 d-flex flex-column h-100 p-3">
<h5 class="text-white font-weight-bolder mb-4 pt-2">Work with the rockets</h5>
<p class="text-white">Wealth creation is an evolutionarily recent positive-sum game. It is all about who take the opportunity first.</p>
<a class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
Read More
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
