→ Asmath
→ Minimal Changelog Page Template design

Minimal Changelog Page Template design

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

1.4k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <h1 class="fw-light mb-5 text-center">Changelog</h1>

<div class="mb-5">
                <div class="d-flex align-items-baseline mb-4">
                    <h2 class="version-tag me-3">2.0.0</h2>
                    <span class="changelog-date">December 26, 2024</span>
                </div>

<div class="bg-white shadow-sm rounded">
                    <div class="changelog-entry position-relative p-4">
                        <div class="change-type added"></div>
                        <div class="ms-3">
                            <h6 class="fw-bold mb-3">Added</h6>
                            <p class="text-muted mb-0">Real-time analytics dashboard with improved performance metrics
                            </p>
                        </div>
                    </div>

<div class="changelog-entry position-relative p-4">
                        <div class="change-type fixed"></div>
                        <div class="ms-3">
                            <h6 class="fw-bold mb-3">Fixed</h6>
                            <p class="text-muted mb-0">Database query optimization for faster response times</p>
                        </div>
                    </div>

<div class="changelog-entry position-relative p-4">
                        <div class="change-type updated"></div>
                        <div class="ms-3">
                            <h6 class="fw-bold mb-3">Updated</h6>
                            <p class="text-muted mb-0">Modernized UI components following new design system</p>
                        </div>
                    </div>
                </div>
            </div>

<div class="mb-5">
                <div class="d-flex align-items-baseline mb-4">
                    <h2 class="version-tag me-3">1.9.0</h2>
                    <span class="changelog-date">December 15, 2024</span>
                </div>

<div class="bg-white shadow-sm rounded">
                    <div class="changelog-entry position-relative p-4">
                        <div class="change-type added"></div>
                        <div class="ms-3">
                            <h6 class="fw-bold mb-3">Added</h6>
                            <p class="text-muted mb-0">Two-factor authentication implementation</p>
                        </div>
                    </div>

<div class="changelog-entry position-relative p-4">
                        <div class="change-type updated"></div>
                        <div class="ms-3">
                            <h6 class="fw-bold mb-3">Updated</h6>
                            <p class="text-muted mb-0">Enhanced security protocols and password requirements</p>
                        </div>
                    </div>
                </div>
            </div>

<div>
                <div class="d-flex align-items-baseline mb-4">
                    <h2 class="version-tag me-3">1.8.5</h2>
                    <span class="changelog-date">December 1, 2024</span>
                </div>

<div class="bg-white shadow-sm rounded">
                    <div class="changelog-entry position-relative p-4">
                        <div class="change-type fixed"></div>
                        <div class="ms-3">
                            <h6 class="fw-bold mb-3">Fixed</h6>
                            <p class="text-muted mb-0">Performance optimizations and bug fixes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

7 months ago

506

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

5 months ago

2.2k

v.5.3
Parallax effect with image background

Author:
Anonymous

2 months ago

493

v.4.6
Bootstrap 5 chat template

Author:
Andreas Müller

7 months ago

785

v.5.3
Invoice template with bootstrap

Author:
Anonymous

7 months ago

349

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

Author:
Anonymous

2 months ago

243

v.4.6
Responsive video container

Author:
Anonymous

7 months ago

356

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

Author:
Ankit khedkar

7 months ago

975

v.5.3
Changelog page template

Author:
Asmath

2 months ago

1.5k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

5 months ago

3.1k

v.5.3
Privacy policy template with boostrap 5

Author:
Anonymous

2 months ago

606

v.5.3
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

5 months ago

3.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent