Bootstrap Cards - Soft UI Dashboard

Discover 6 Bootstrap Cards available in Soft UI Dashboard

Card Profile

Card Project User

Card Song

Card Illustration

<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

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

Card Payment