How to Create 404 Error Page in Bootstrap ?

Last Updated : 30 Jul, 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/[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:

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/[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>