|
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:
Simple 404 Error PageThis 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/[email protected]/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:
Illustrative 404 Error PageThis 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/[email protected]/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>
Output:
|
.jpg){kind=small}
