→ Asmath
→ Changelog page template

Changelog page template

This bootstrap css example is contributed by Asmath, on 26-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Other

Author Asmath

956

v.5.3

Fork Fullscreen

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="text-center mb-5">
                <h1 class="display-4 fw-bold">Changelog</h1>
                <p class="text-muted">Keep track of our latest updates and improvements</p>
            </div>

<div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <span class="badge bg-primary version-badge me-2">v2.0.0</span>
                        <small class="text-muted">December 26, 2024</small>
                    </div>

<h5 class="card-title">Major Release: Performance Boost</h5>

<div class="position-relative">
                        <div class="changelog-item mb-3">
                            <div class="timeline-line"></div>
                            <h6 class="fw-bold text-success">Added</h6>
                            <p>New dashboard interface with real-time analytics</p>
                            <p>Advanced search functionality with filters</p>
                        </div>

<div class="changelog-item mb-3">
                            <div class="timeline-line"></div>
                            <h6 class="fw-bold text-danger">Fixed</h6>
                            <p>Mobile responsiveness issues on smaller devices</p>
                            <p>Database optimization for faster queries</p>
                        </div>

<div class="changelog-item">
                            <h6 class="fw-bold text-warning">Changed</h6>
                            <p>Updated UI components to match new design system</p>
                            <p>Improved error handling and user feedback</p>
                        </div>
                    </div>
                </div>
            </div>

<div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <span class="badge bg-secondary version-badge me-2">v1.9.0</span>
                        <small class="text-muted">December 15, 2024</small>
                    </div>

<h5 class="card-title">Feature Update: Enhanced Security</h5>

<div class="position-relative">
                        <div class="changelog-item mb-3">
                            <div class="timeline-line"></div>
                            <h6 class="fw-bold text-success">Added</h6>
                            <p>Two-factor authentication support</p>
                            <p>Email notifications for security events</p>
                        </div>

<div class="changelog-item">
                            <h6 class="fw-bold text-warning">Changed</h6>
                            <p>Updated password requirements for better security</p>
                            <p>Improved session management</p>
                        </div>
                    </div>
                </div>
            </div>

<div class="card shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <span class="badge bg-secondary version-badge me-2">v1.8.5</span>
                        <small class="text-muted">December 1, 2024</small>
                    </div>

<h5 class="card-title">Maintenance Update</h5>

<div class="position-relative">
                        <div class="changelog-item mb-3">
                            <div class="timeline-line"></div>
                            <h6 class="fw-bold text-danger">Fixed</h6>
                            <p>Minor bug fixes and performance improvements</p>
                            <p>Resolved issue with data export functionality</p>
                        </div>

<div class="changelog-item">
                            <h6 class="fw-bold text-warning">Changed</h6>
                            <p>Updated third-party dependencies</p>
                            <p>Documentation improvements</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Interactive Kanban Task Board

Author:
Anonymous

4 months ago

2.5k

v.5.3
Parallax effect with image background

Author:
Anonymous

1 month ago

230

v.4.6
Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

6 months ago

645

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

1 month ago

915

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

4 months ago

1.3k

v.5.3
Responsive video container

Author:
Anonymous

6 months ago

294

v.4.6
Invoice template with bootstrap

Author:
Anonymous

6 months ago

286

v.4.6
Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

6 months ago

389

v.5.3
Bootstrap 5 chat template

Author:
Andreas Müller

6 months ago

587

v.5.3
Privacy policy template with boostrap 5

Author:
Anonymous

1 month ago

250

v.5.3
Background image with bootstrap 4
Bootstrap 4 background image

Author:
Anonymous

1 month ago

139

v.4.6
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

4 months ago

3.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent