→ Isaac Winslow
→ Activity Logs Dashboard

Activity Logs Dashboard

activity logs component with timeline visualization, export functionality, and detailed event tracking in Bootstrap 5.3.

This bootstrap css example is contributed by Isaac Winslow, on 24-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Admin Dashboard

Tags: Dashboard

Author Isaac Winslow

3.2k

v.5.3

Fork Fullscreen

<div class="bg-light">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h4 class="mb-0">Activity Logs</h4>
                            <div class="d-flex gap-2">
                                <button class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-download me-2"></i>Export
                                </button>
                                <button class="btn btn-primary btn-sm">
                                    <i class="fas fa-filter me-2"></i>Filter
                                </button>
                            </div>
                        </div>

<div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <div class="search-box bg-white">
                                    <i class="fas fa-search text-muted me-2"></i>
                                    <input type="text" class="border-0 w-75" placeholder="Search activities...">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex gap-2 flex-wrap">
                                    <span class="badge filter-badge active px-3 py-2">All</span>
                                    <span class="badge filter-badge px-3 py-2">User</span>
                                    <span class="badge filter-badge px-3 py-2">Security</span>
                                    <span class="badge filter-badge px-3 py-2">System</span>
                                    <span class="badge filter-badge px-3 py-2">Error</span>
                                </div>
                            </div>
                        </div>

<div class="activity-timeline">
                            
                            <div class="activity-item bg-white">
                                <div class="d-flex gap-3">
                                    <div class="activity-icon bg-success-soft text-success">
                                        <i class="fas fa-user-check"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">User Login Successful</h6>
                                            <span class="activity-date">2 minutes ago</span>
                                        </div>
                                        <p class="text-muted mb-2">Successful login from Chrome on Windows</p>
                                        <div class="d-flex align-items-center">
                                            <div class="activity-user me-3">
                                                <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="User">
                                            </div>
                                            <span class="text-muted small">IP: 192.168.1.1</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="activity-item bg-white">
                                <div class="d-flex gap-3">
                                    <div class="activity-icon bg-warning-soft text-warning">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">Security Alert</h6>
                                            <span class="activity-date">15 minutes ago</span>
                                        </div>
                                        <p class="text-muted mb-2">Multiple failed login attempts detected</p>
                                        <div class="d-flex align-items-center">
                                            <span class="text-warning small">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                High Priority
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="activity-item bg-white">
                                <div class="d-flex gap-3">
                                    <div class="activity-icon bg-info-soft text-info">
                                        <i class="fas fa-cog"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">System Update</h6>
                                            <span class="activity-date">1 hour ago</span>
                                        </div>
                                        <p class="text-muted mb-2">System maintenance completed successfully</p>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar w-100" role="progressbar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="activity-item bg-white">
                                <div class="d-flex gap-3">
                                    <div class="activity-icon bg-danger-soft text-danger">
                                        <i class="fas fa-exclamation-circle"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">Error Detected</h6>
                                            <span class="activity-date">2 hours ago</span>
                                        </div>
                                        <p class="text-muted mb-2">API endpoint /api/users/create returned 500 error</p>
                                        <div class="bg-light p-2 rounded">
                                            <code class="small">Error: Database connection timeout</code>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="d-flex justify-content-between align-items-center mt-4">
                            <span class="text-muted small">Showing 1-4 of 256 activities</span>
                            <nav>
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

8 months ago

7k

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

10 months ago

2.2k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

7 months ago

2.4k

v.5.3
Responsive Admin Dashboard Component

Author:
Isaac Winslow

8 months ago

1.6k

v.5.3
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Shola Ajani

5 months ago

4.2k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

15.6k

v.5.3
Minimal shopping cart

Author:
Valeria González

8 months ago

1.7k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

11 months ago

5.5k

v.4.6
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

7 months ago

2.3k

v.5.3
Simple hero section

Author:
Mateo Rojas

7 months ago

4.3k

v.5.3
Contact us form with map

Author:
karia

1 year ago

12.2k

v.5.3
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");

Author:
StarCode Kh

5 months ago

1.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent