<div class="row justify-content-between">
    <!-- top card START -->
    <div class="mb-3 col-md-6 col-lg-3">
        <div class="card primary-card">
            <div class="row g-0">
                <div class="col-10">
                    <div class="card-body">
                        <p class="card-text mb-0 text-primary">New Users</p>
                        <h5 class="card-title">200</h5>
                    </div>
                </div>
                <div class="col-2 my-auto">
                    <i class="text-muted fa fa-user fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- top card END -->
    <!-- top card START -->
    <div class=" mb-3 col-md-6 col-lg-3">
        <div class="card success-card">
            <div class="row g-0">
                <div class="col-10">
                    <div class="card-body">
                        <p class="card-text mb-0 text-success">All Bookings</p>
                        <h5 class="card-title">{{bookings|length}}</h5>
                    </div>
                </div>
                <div class="col-2 my-auto">
                    <i class="text-muted fa fa-user fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- top card END -->
    <!-- top card START -->
    <div class=" mb-3 col-md-6 col-lg-3">
        <div class="card info-card">
            <div class="row g-0">
                <div class="col-10">
                    <div class="card-body">
                        <p class="card-text mb-0 text-info">New Users</p>
                        <h5 class="card-title">200</h5>
                    </div>
                </div>
                <div class="col-2 my-auto">
                    <i class="text-muted fa fa-user fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- top card END -->
    <!-- top card START -->
    <div class=" mb-3 col-md-6 col-lg-3">
        <div class="card warning-card">
            <div class="row g-0">
                <div class="col-10">
                    <div class="card-body">
                        <p class="card-text mb-0 text-warning">New Users</p>
                        <h5 class="card-title">200</h5>
                    </div>
                </div>
                <div class="col-2 my-auto">
                    <i class="text-muted fa fa-user fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- top card END -->
</div>