Bootstrap Dashboard Card Widget
<!-- Card 3 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-7 col-lg-6 col-xl-5 col-xxl-4">
<div class="card widget-card border-light shadow-sm bg-primary">
<div class="card-body p-4">
<div class="row align-items-center justify-content-center">
<div class="col-6">
<h5 class="card-title widget-card-title text-white mb-1">Traffic Stats</h5>
<p class="mb-0 fs-7 text-white">Overview</p>
</div>
<div class="col-6 d-flex align-items-center justify-content-end">
<span class="fs-1 bsb-w-85 bsb-h-85 text-white border border-3 border-primary-subtle rounded-circle d-flex align-items-center justify-content-center">
<i class="bi bi-stars bsb-rotate-45"></i>
</span>
</div>
</div>
<div class="card mt-5 border-0">
<div class="card-body">
<div class="row gy-4">
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
</span>
<div>
<h6 class="m-0">Domain Rating</h6>
<span class="fs-7 text-success">+13</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">92</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-45"></i>
</span>
<div>
<h6 class="m-0">Referring Domains</h6>
<span class="fs-7 text-danger">-1.2K</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">113K</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
</span>
<div>
<h6 class="m-0">Backlinks</h6>
<span class="fs-7 text-success">+932K</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">50.6M</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
</span>
<div>
<h6 class="m-0">Organic Traffic</h6>
<span class="fs-7 text-success">+2.1K</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">525K</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-45"></i>
</span>
<div>
<h6 class="m-0">Organic Keywords</h6>
<span class="fs-7 text-danger">-19.5K</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">142K</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
</span>
<div>
<h6 class="m-0">Paid Traffic</h6>
<span class="fs-7 text-success">+1.2K</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">49.1K</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center">
<div class="col-8">
<div class="d-flex align-items-center">
<span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="bi bi-arrow-right-short bsb-rotate-45"></i>
</span>
<div>
<h6 class="m-0">Paid Keywords</h6>
<span class="fs-7 text-danger">-130</span>
</div>
</div>
</div>
<div class="col-4">
<h6 class="h3 text-end m-0">2.5K</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/cards/card-3/assets/css/card-3.css">
Bootstrap Stats Cards are versatile components tailored for inclusion in admin dashboards, providing concise and visually engaging representations of critical statistical information. These cards, crafted using Bootstrap framework elements, offer a streamlined and responsive design that adapts seamlessly across different screen sizes and devices.
