→ 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.7k

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

4 months ago

3.1k

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

Author:
Anonymous

2 months ago

1.4k

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

7 months ago

956

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

Author:
karia

1 year ago

1.6k

v.5.3
404 page template

Author:
Valeria González

8 months ago

10.4k

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

Author:
Anonymous

6 days ago

75

v.5.3
User Avatar Example

Author:
Anonymous

1 year ago

1.3k

v.4.6
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

9 months ago

4.1k

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

7 months ago

584

v.4.6
Auto-expanding Textarea

Author:
Anonymous

4 months ago

551

v.5.3
Contact card
Company contact card with email, contact number, and social links

Author:
Mateo Rojas

4 months ago

3.2k

v.5.3
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

2 months ago

420

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent