Bootstrap Vector Map Card with Progress Bar
<!-- 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>
<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">
<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.