Bootstrap Dashboard Card Widget

November 30, 2023

This Bootstrap Dashboard Card Widget creates visually appealing and versatile cards within the dashboard interface. It enhances the user experience by offering a centralized and organized presentation of critical data within the admin interface.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.2 and BSB Framework 2.0.3. We have rechecked this Bootstrap snippet on Nov 29, 2023.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap Payment Gateway Card Widget

This Bootstrap Dashboard Card Widget typically contains condensed yet pivotal information such as analytics, key performance indicators (KPIs), statistics, graphs, or summarized data relevant to administrative tasks.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

This Bootstrap Dashboard Card Widget is highly customizable, allowing administrators to tailor the cards according to their specific preferences and the nature of the data they want to display.

The primary purpose of this Bootstrap Dashboard Card Widget is to provide a quick and concise overview of essential information, enabling administrators to make informed decisions promptly and efficiently while navigating the dashboard.

Features

Bootstrap 5
BSB Framework
Bootstrap Icons
HTML5 & CSS3
W3C Valid
Clean Snippet
Commented Code
Responsive Layout
Easy to Use
SEO Optimized
Cross Browser Compatible

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

<!-- 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 5 Cards

Browse our Bootstrap Cards that serve as versatile components within an Admin Dashboard, offering a structured and flexible way to present various types of content and data. Developed using the Bootstrap framework, these cards provide a visually appealing format for displaying information such as statistics, notifications, user profiles, charts, or other relevant data elements.