Bootstrap Cards Section

Discover 28 Bootstrap Cards Section available in Loopple

Card Stats

Component from Asteria Dashboard Builder
<div class="row removable">
  <div class="col-xl-3 col-sm-6 drop-zone">
    <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>
  </div>

  <div class="col-xl-3 col-sm-6 drop-zone">
    <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 Users</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">+3%</span>
          </div>
          <h4 class="font-weight-bolder mb-0">
            2,300
          </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-world text-lg opacity-10" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>

  <div class="col-xl-3 col-sm-6 drop-zone">
    <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">New Clients</p>
          <div class="d-flex align-items-center my-2">
            <span class="badge bg-danger-soft text-xxs">
              <i class="fas fa-angle-down text-danger" aria-hidden="true"></i>
            </span>
            <span class="text-xs font-weight-bolder ms-1">-2.06%</span>
          </div>
          <h4 class="font-weight-bolder mb-0">
            3,462
          </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-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>

  <div class="col-xl-3 col-sm-6 drop-zone">
    <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">Sales</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">+5,42%</span>
          </div>
          <h4 class="font-weight-bolder mb-0">
            $103,430
          </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-cart text-lg opacity-10" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</div>

  </div>
</div>

Card Stats Bg

Component from Asteria Dashboard Builder
Requires JavaScript

Card Swiper

Component from Asteria Dashboard Builder

Section Card Stats Dark

Component from Soft UI Dashboard Builder
<div class="row mt-4 removable">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card bg-gradient-dark 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-white font-weight-bold">Today&#39;s Money</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    $53,000
                    <span class="text-success text-sm font-weight-bolder">+55%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card bg-gradient-dark 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-white font-weight-bold">Today&#39;s Users</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    2,300
                    <span class="text-success text-sm font-weight-bolder">+3%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card bg-gradient-dark 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-white font-weight-bold">New Clients</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    +3,462
                    <span class="text-danger text-sm font-weight-bolder">-2%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 drop-zone">
        <div class="card bg-gradient-dark 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-white font-weight-bold">Sales</p>
                <h5 class="font-weight-bolder text-white mb-0">
                    $103,430
                    <span class="text-success text-sm font-weight-bolder">+5%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>

Section Card Stats

Component from Soft UI Dashboard Builder
<div class="row  mt-4 removable">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card 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 font-weight-bold">Today&#39;s Money</p>
                <h5 class="font-weight-bolder mb-0">
                    $53,000
                    <span class="text-success text-sm font-weight-bolder">+55%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card 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 font-weight-bold">Today&#39;s Users</p>
                <h5 class="font-weight-bolder mb-0">
                    2,300
                    <span class="text-success text-sm font-weight-bolder">+3%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
        <div class="card 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 font-weight-bold">New Clients</p>
                <h5 class="font-weight-bolder mb-0">
                    +3,462
                    <span class="text-danger text-sm font-weight-bolder">-2%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 drop-zone">
        <div class="card 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 font-weight-bold">Sales</p>
                <h5 class="font-weight-bolder mb-0">
                    $103,430
                    <span class="text-success text-sm font-weight-bolder">+5%</span>
                </h5>
                </div>
            </div>
            <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>

Section Cards Ecommerce

Component from Soft UI Dashboard Builder

Card Playlist

Component from Soft UI Dashboard Builder

Section Cards Payment

Component from Soft UI Dashboard Builder

Section Card Songs

Component from Soft UI Dashboard Builder

Section Card Group

Component from Soft UI Dashboard Builder