How to Create 404 Error Page in Bootstrap ?

Last Updated : 29 Feb, 2024

Every website encounters errors sometimes, so it becomes important to show these errors in a presentable manner to the users. Creating a custom 404 error page using Bootstrap 5 can enhance the user experience when visitors encounter a page that doesn’t exist.

Below are the types of 404 Error Page we can create in Bootstrap:

Table of Content

Simple 404 Error Page
Illustrative 404 Error Page

Simple 404 Error Page

This HTML page displays a 404 error message for a missing webpage. It utilizes Bootstrap 5.3 for styling, ensuring responsiveness. The page centers the error message vertically and horizontally, featuring a large “404” heading, followed by “Page Not Found,” and a brief apology message explaining the absence of the requested page.

Example: This example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                       initial-scale=1.0" />
    <title>404 Error</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet" />
    <style>
        body,
        html {
            height: 100%;
        }
    </style>
</head>
 
<body class="d-flex justify-content-center 
                 align-items-center">
    <div class="col-md-12 text-center">
        <h1>404</h1>
        <h2>Page Not Found</h2>
        <p>
            Sorry, the page you are looking
            for does not exist.
        </p>
    </div>
</body>
 
</html>

Output:

Screenshot-2024-02-22-164753

Illustrative 404 Error Page

This HTML page features a background image with a text overlay, suggesting the user is lost. It employs Bootstrap 5.3 for styling and responsiveness. The centered content includes a prominent title, a message indicating the absence of the requested page, and a call-to-action button prompting users to return to the homepage.

Example: This example shows the use of the above-explained appraoch.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "poppins";
        }
 
        .bg_img {
            background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240226131034/2142357.jpg');
            height: 400px;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
    <title>Document</title>
</head>
 
<body>
    <section class="py-5">
        <div class="d-flex justify-content-center 
                    align-items-center flex-column 
                    text-center w-100">
            <div class="bg_img w-50">
            </div>
            <div>
                <p class="display-4">Looks Like You're Lost</p>
                <p>The page you are looking for not available...</p>
                <a href="#"
                   class="text-white text-decoration-none px-4 py-3 
                          bg-success d-inline-block mt-2 rounded">
                    Go to Home
                </a>
            </div>
        </div>
    </section>
</body>
 
</html>