→ Ross Wille
→ Interactive Data Visualization Dashboard

Interactive Data Visualization Dashboard

This bootstrap css example is contributed by Ross Wille, on 13-Sep-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Info, Show info, Statistics,Admin Dashboard

Tags: Stats Dashboard

Author Ross Wille

165

v.5.3

Fork Fullscreen

<div class="container py-4">
    <h1 class="text-center mb-4">Data Visualization Dashboard</h1>
    <div class="row">
        <div class="col-md-3">
            <div class="dashboard-card weather-widget">
                <div class="weather-icon">
                    <i class="fas fa-sun"></i>
                </div>
                <div class="weather-temp">25°C</div>
                <div class="weather-description">Sunny</div>
                <div class="weather-location">New York, NY</div>
            </div>
            <div class="dashboard-card">
                <h3>Quick Stats</h3>
                <div class="row">
                    <div class="col-6 mb-3">
                        <div class="stat-card">
                            <div class="stat-icon text-primary">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-value">1,234</div>
                            <div class="stat-label">Total Users</div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="stat-card">
                            <div class="stat-icon text-success">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                            <div class="stat-value">$5,678</div>
                            <div class="stat-label">Revenue</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card">
                            <div class="stat-icon text-info">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="stat-value">42</div>
                            <div class="stat-label">New Posts</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card">
                            <div class="stat-icon text-warning">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="stat-value">4.7</div>
                            <div class="stat-label">Avg. Rating</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="dashboard-card">
                <h3>Monthly Revenue</h3>
                <canvas id="revenueChart"></canvas>
            </div>
            <div class="dashboard-card">
                <h3>User Demographics</h3>
                <canvas id="demographicsChart"></canvas>
            </div>
        </div>
    </div>
</div>

More Examples

Stats card made with boostrap 4.6
Minimal admin stats card

Author:
Mishti

4 months ago

296

v.4.6
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

4 months ago

792

v.5.3
Responsive Dashboard Statistics Cards

Author:
Ankit khedkar

3 weeks ago

75

v.5.3
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

2 weeks ago

59

v.5.3
Simple stats section
Minimalist stats example made with bootstrap 5

Author:
Tane Mahuta

4 months ago

290

v.5.3
Beautiful Stats Section
App stats section with icons. with hover effect

Author:
Riz Mohammad

4 months ago

272

v.5.3
Stats section
Show your product/website stats beautifully

Author:
Nguyen Minh

5 months ago

271

v.4.6
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

2 months ago

1.2k

v.4.6
Modern Service Cards Component With Icons

Author:
Alaric Sloane

2 weeks ago

52

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

7 months ago

246

v.5.3
Simple stats section
Minimalist stats example made with bootstrap 5

Author:
Tane Mahuta

4 months ago

291

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

7 months ago

266

v.5.3

Didn't find component you were looking for?

Search from 200+ componenent