→ 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

Interactive Data Visualization Dashboard

Author:
Ross Wille

1 year ago

4.4k

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

Author:
Isaac Winslow

1 year ago

11k

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

Author:
Shola Ajani

1 year ago

7.4k

v.5.3
Responsive Admin Dashboard Component

Author:
Isaac Winslow

1 year ago

3.7k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

6.1k

v.5.3
Custom buttons

Author:
Anonymous

2 years ago

2.8k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

1 year ago

5k

v.5.3
Timer with bootstrap

Author:
Anonymous

1 year ago

4.4k

v.5.3
Accordion example with Bootstrap 5.3
accordion with animation

Author:
Ankit khedkar

2 years ago

10.6k

v.5.3
Delete Confirmation Modal

Author:
Alaric Sloane

1 year ago

19.2k

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

1 year ago

10.3k

v.4.6
Testimonial carousel

Author:
Sofia Petrova

2 years ago

2.7k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent