Bootstrap Cards

Discover 38 Bootstrap Cards available in Loopple

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>

Card Profile

Component from Soft UI Dashboard Builder

Card Project User

Component from Soft UI Dashboard Builder

Card Song

Component from Soft UI Dashboard Builder

Card Payment

Component from Soft UI Dashboard Builder

Card Profile

Component from Adminkit Builder
<div class="card draggable mb-3">
  <div class="card-header">
    <h5 class="card-title mb-0">Profile Details</h5>
  </div>
  <div class="card-body text-center">
    <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
    <h5 class="card-title mb-0">Christina Mason</h5>
    <div class="text-muted mb-2">Lead Developer</div>
    <div>
      <a class="btn btn-primary btn-sm" href="#">Follow</a>
      <a class="btn btn-primary btn-sm" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg> Message </a>
    </div>
  </div>
  <hr class="my-0">
  <div class="card-body">
    <h5 class="h6 card-title">Skills</h5>
    <a href="#" class="badge bg-primary me-1 my-1">HTML</a>
    <a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
    <a href="#" class="badge bg-primary me-1 my-1">Sass</a>
    <a href="#" class="badge bg-primary me-1 my-1">Angular</a>
    <a href="#" class="badge bg-primary me-1 my-1">Vue</a>
    <a href="#" class="badge bg-primary me-1 my-1">React</a>
    <a href="#" class="badge bg-primary me-1 my-1">Redux</a>
    <a href="#" class="badge bg-primary me-1 my-1">UI</a>
    <a href="#" class="badge bg-primary me-1 my-1">UX</a>
  </div>
  <hr class="my-0">
  <div class="card-body">
    <h5 class="h6 card-title">About</h5>
    <ul class="list-unstyled mb-0">
      <li class="mb-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home feather-sm me-1">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg> Lives in <a href="#">San Francisco, SA</a>
      </li>
      <li class="mb-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase feather-sm me-1">
          <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
          <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
        </svg> Works at <a href="#">GitHub</a>
      </li>
      <li class="mb-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin feather-sm me-1">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg> From <a href="#">Boston</a>
      </li>
    </ul>
  </div>
</div>

Card Image

Component from Adminkit Builder
<div class="card draggable" style="width: 18rem;">
  <img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card#&39;s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card Stats

Component from Adminkit Builder
<div class="card draggable">
    <div class="card-body">
        <div class="row">
            <div class="col mt-0">
                <h5 class="card-title">Sales</h5>
            </div>

            <div class="col-auto">
                <div class="stat text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
                </div>
            </div>
        </div>
        <h1 class="mt-1 mb-3">2.382</h1>
        <div class="mb-0">
            <span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
            <span class="text-muted">Since last week</span>
        </div>
    </div>
</div>

Card Currencies List

Component from Adminkit Builder