Bootstrap Vector Map Card with Progress Bar

How to use this Bootstrap snippet
Global Visitors
Last updated: 7 days ago
United States
33%
Brazil
17%
Russia
19%
Australia
31%

How to use this Bootstrap Vector Map Card with Progress Bar

Place the code in the <body> for Interface 
          
<!-- Map 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-lg-9 col-xl-8">
        <div class="card widget-card border-light shadow-sm">
          <div class="card-body p-4">
            <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
              <div class="mb-2 mb-sm-0">
                <h5 class="card-title widget-card-title m-0">Global Visitors</h5>
              </div>
              <div>
                <span class="text-secondary fs-7">Last updated: 7 days ago</span>
              </div>
            </div>
            <div id="bsb-map-3" class="bsb-jvm-zoom-btn"></div>
            <div class="card mt-5 border-0 bg-primary">
              <div class="card-body">
                <div class="row gy-3 gy-sm-4">
                  <div class="col-12 col-sm-6">
                    <div class="card border-0">
                      <div class="card-body">
                        <h6 class="mb-3">United States</h6>
                        <div class="progress" role="progressbar" aria-label="United States Visitors" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-primary" style="width: 33%">33%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-sm-6">
                    <div class="card border-0">
                      <div class="card-body">
                        <h6 class="mb-3">Brazil</h6>
                        <div class="progress" role="progressbar" aria-label="Brazil Visitors" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-success" style="width: 17%">17%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-sm-6">
                    <div class="card border-0">
                      <div class="card-body">
                        <h6 class="mb-3">Russia</h6>
                        <div class="progress" role="progressbar" aria-label="Australia Visitors" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-danger" style="width: 19%">19%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-sm-6">
                    <div class="card border-0">
                      <div class="card-body">
                        <h6 class="mb-3">Australia</h6>
                        <div class="progress" role="progressbar" aria-label="Australia Visitors" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-info" style="width: 31%">31%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap/dist/css/jsvectormap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/maps/map-3/assets/css/map-3.css">
Place the <script> tag before the closing </body> for JS 
            
<script src="https://cdn.jsdelivr.net/npm/jsvectormap"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world-merc.js"></script>
<script src="https://unpkg.com/[email protected]/components/maps/map-3/assets/controller/map-3.js"></script>

The Bootstrap Vector Map enhances admin dashboards' functionality and visual appeal by providing a powerful tool to present geographic data in an engaging and informative manner. Its customization options and interactive capabilities make it valuable for administrators seeking to incorporate geographical insights into their dashboard interfaces.