Bootstrap Column Chart Card Simple Example

How to use this Bootstrap snippet
Customers

3,131

+19%

How to use this Bootstrap Column Chart Card Simple Example

Place the code in the <body> for Interface 
          
<!-- Chart 8 - 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">
          <div class="card-body p-4">
            <h5 class="card-title widget-card-title mb-2">Customers</h5>
            <div class="row gy-0">
              <div class="col-12">
                <h4>3,131</h4>
              </div>
              <div class="col-12">
                <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-2">
                    <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                  </span>
                  <div>
                    <span class="fs-7">+19%</span>
                  </div>
                </div>
              </div>
            </div>
            <div id="bsb-chart-8" class="mt-2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/components/charts/chart-8/assets/css/chart-8.css">
Place the <script> tag before the closing </body> for JS 
            
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://unpkg.com/bs-brain@2.0.4/components/charts/chart-8/assets/controller/chart-8.js"></script>

The Simple Bootstrap Column Chart Card is a user-friendly graphical representation tool designed to integrate into admin dashboards. It offers a clear and concise way to visualize data trends using column charts, leveraging the Bootstrap framework for adaptability and responsiveness across various devices and screen sizes. This feature empowers administrators to showcase essential data comparisons, trends, or categorical distributions within dashboard cards.