Bootstrap Cards

Discover 38 Bootstrap Cards available in Loopple

Card Carousel

Component from Asteria Dashboard Builder

<div class="card min-height-300 h-100 draggable">
    <div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
      <div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
        <div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
          <div class="carousel-inner min-height-300 h-100">
            <div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1746&amp;q=80');">
              <span class="mask bg-gradient-dark"></span>
              <div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
                <h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
                <p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
              </div>
            </div>
            <div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1740&amp;q=80');">
              <span class="mask bg-gradient-dark"></span>
              <div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
                <h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
                <p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
              </div>
            </div>
            <div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2064&amp;q=80');">
              <span class="mask bg-gradient-dark"></span>
              <div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
                <h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
                <p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
            <span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
            <span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>

Card Stat

Component from Asteria Dashboard Builder

<div class="card mb-4 draggable">
    <div class="card-body p-3">
        <div class="row">
        <div class="col-8">
            <div class="numbers">
            <p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Money</p>
            <div class="d-flex align-items-center my-2">
                <span class="badge bg-success-soft text-xxs">
                <i class="fas fa-angle-up text-success" aria-hidden="true"></i>
                </span>
                <span class="text-xs font-weight-bolder ms-1">+55%</span>
            </div>
            <h4 class="font-weight-bolder mb-0">
                $53,000
            </h4>
            </div>
        </div>
        <div class="col-4 text-end">
            <div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
            <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
            </div>
        </div>
        </div>
    </div>
</div>