→ 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

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