→ 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

2.8k

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:
Shola Ajani

4 months ago

3.3k

v.5.3
Interactive Data Visualization Dashboard

Author:
Ross Wille

9 months ago

1.8k

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

6 months ago

1.8k

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

Author:
Isaac Winslow

7 months ago

5.9k

v.5.3
Responsive Admin Dashboard Component

Author:
Isaac Winslow

7 months ago

1.3k

v.5.3
Beautiful Bootstrap Accordion

Author:
Alaric Sloane

7 months ago

3k

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

9 months ago

756

v.4.6
Steps section

Author:
Ankit khedkar

9 months ago

3.9k

v.5.3
Delete Confirmation Modal

Author:
Alaric Sloane

8 months ago

10.6k

v.5.3
Expanding Cards
Expanding Cards

Author:
Rami AlAjo

4 months ago

1.7k

v.4.6
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

2.8k

v.3.4
User Profile Card with Bootstrap 5

Author:
Anonymous

4 months ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent