→ 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

592

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

Error page template
Modern and clean 404-page template made with Bootstrap

Author:
Anonymous

1 day ago

13

v.5.3
404 page template

Author:
Valeria González

4 months ago

1.5k

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

3 months ago

239

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

Author:
karia

9 months ago

410

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

5 months ago

1.4k

v.5.3
Collapsible Sidebar

Author:
Alaric Sloane

1 month ago

320

v.5.3
Simple login form

Author:
Prajwal Hallale

8 months ago

2.7k

v.4.6
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

5 months ago

1.3k

v.5.3
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

1 month ago

143

v.5.3
Stats section
Show your product/website stats beautifully

Author:
Nguyen Minh

6 months ago

353

v.4.6
Pulsing Button

Author:
Prajwal Hallale

9 months ago

437

v.5.3
Beutifull Comment Section Bootstrap - 5
The comment section for your website

Author:
Asmath

10 hours ago

20

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent