How to Create 404 Error Page in Bootstrap ?
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:
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.w3wiki.net/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: