→ Ross Wille
→ 404 error page template

404 error page template

This bootstrap css example is contributed by Ross Wille, on 19-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are 404 Pages, Not found

Tags: Error Page

Author Ross Wille

3.9k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="error-container">
        <h1 class="display-1">Oops!</h1>
        <h2 class="display-4">404 Not Found</h2>
        <div class="error-details mb-4">
            Sorry, an error has occurred. The requested page was not found!
        </div>
        <div class="error-actions d-flex flex-wrap gap-2 justify-content-center">
            <a href="/" class="btn btn-primary btn-lg" style="width:240px">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-house me-2" viewBox="0 0 16 16">
                    <path
                        d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" />
                </svg>
                Take Me Home
            </a>
            <a href="/contact" class="btn btn-outline-secondary btn-lg" style="width:240px">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-envelope me-2" viewBox="0 0 16 16">
                    <path
                        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />
                </svg>
                Contact Support
            </a>
        </div>
    </div>
</div>

More Examples

404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

9 months ago

1.6k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
karia

1 year ago

3.9k

v.5.3
404 page template

Author:
Valeria González

1 year ago

25.9k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

1 year ago

3.9k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

8 months ago

1.8k

v.5.3
Modern 404 Error Page with Lottie Animation and Bootstrap Layout
This elegant and responsive 404 error page is built with Bootstrap 5 and features a smooth, animated Lottie illustration to enhance user experience. The layout is fully responsive, with the animation and error message side-by-side on larger screens and stacked on smaller devices. It includes a clear "Back to homepage" button, making it user-friendly and ideal for maintaining engagement even when users encounter a broken link or missing page.

Author:
Talha Abdullah Bangyal

8 months ago

4.3k

v.5.3
Error page template
Modern and clean 404-page template made with Bootstrap

Author:
Anonymous

1 year ago

9.1k

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
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

6.5k

v.5.3
Responsive footer using HTML 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. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

9.1k

v.4.6
Customer testimonials
modern and clean customer review section

Author:
Anonymous

1 year ago

3.1k

v.5.3
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

1 year ago

4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent