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:
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 =
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 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 =
< style >
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
}
.bg_img {
background: url(
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:
An Illustrative 404 Error Page
Share your thoughts in the comments
Please Login to comment...