→ 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

1.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

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

8 months ago

1.1k

v.4.6
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

2 days ago

57

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

Author:
Anonymous

5 months ago

3.7k

v.5.3
404 page template

Author:
Valeria González

9 months ago

12.2k

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

Author:
karia

1 year ago

1.8k

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

Author:
Anonymous

3 months ago

1.6k

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

Author:
Anonymous

4 weeks ago

253

v.5.3
Search bar with search icon in bootstrap 5

Author:
Anonymous

5 months ago

1.2k

v.5.3
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

10 months ago

601

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

6 months ago

1.4k

v.5.3
Underlined Tabs with bootstrap 5
Minimal design with underline indicator it has Smooth transitions

Author:
Prajwal Hallale

5 months ago

1.5k

v.5.3
modern search bar with autocompletion
click to see effect

Author:
Mateo Rojas

5 months ago

2.3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent