Bootstrap Cards Section

Discover 28 Bootstrap Cards Section available in Loopple

Cards Section Real Estate

Cards Section Courses

Cards Section Gifts

Card Sales

Section Cards Events

Cards Section Multiple Cards

Card Shopping Flowers

Cards Section With Image And Link

Cards Section Ecommerce With 3 Categories

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>