→ 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

Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

4.5k

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

6.4k

v.5.3
Responsive Admin Dashboard Component

Author:
Isaac Winslow

1 year ago

2.9k

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

9.5k

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

1 year ago

3.6k

v.5.3
About Section

Author:
Anonymous

1 year ago

2.4k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

1 year ago

12.5k

v.5.3
Error Page, you can use HTML, CSS, 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.

Author:
zobaidul kaziex

1 year ago

2.3k

v.4.6
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Anonymous

8 months ago

2.4k

v.5.3
User Profile Card with Social Icons using Bootstrap 5

Author:
Anonymous

1 year ago

7.4k

v.5.3
Expanding Search Bar - Bootstrap 5
Expand search bar on click

Author:
Andreas Müller

1 year ago

5.9k

v.5.3
Parallax effect with image background

Author:
Anonymous

1 year ago

2.5k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent