→ 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

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

5 months ago

4.2k

v.5.3
404 page template

Author:
Valeria González

10 months ago

13.7k

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

Author:
karia

1 year ago

2k

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

Author:
Anonymous

4 months ago

1.8k

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

Author:
Anonymous

1 week ago

103

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

9 months ago

1.2k

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

3 weeks ago

515

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

Author:
Anonymous

1 month ago

370

v.5.3
Testimonial
with auto-scrolling testimonial cards

Author:
Sofia Petrova

10 months ago

3.8k

v.5.3
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Anonymous

3 weeks ago

286

v.5.3
Pagination

Author:
Anonymous

10 months ago

925

v.5.3
Featured Product Card

Author:
Prajwal Hallale

1 year ago

1.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent