→ 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

2.3k

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

Bootstrap 5 chat template

Author:
Andreas Müller

1 year ago

2.4k

v.5.3
Privacy policy template with boostrap 5

Author:
Anonymous

10 months ago

2.7k

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

1 year ago

8k

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

1 year ago

6.2k

v.5.3
Changelog page template

Author:
Asmath

10 months ago

3k

v.5.3
Invoice template with bootstrap

Author:
Anonymous

1 year ago

891

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

Author:
Anonymous

10 months ago

1.3k

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

Author:
Ankit khedkar

1 year ago

2.6k

v.5.3
Responsive video container

Author:
Anonymous

1 year ago

1.1k

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

Author:
Ankit khedkar

1 year ago

1.3k

v.5.3
Parallax effect with image background

Author:
Anonymous

10 months ago

2k

v.4.6
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

1.4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent