Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 5, 2022 09:30 am GMT

Bootstrap 5 404 Page Examples

Welcome to todays tutorial. In todays tutorial, we will create a 404 error page using bootstrap 5. For this 404 template we will not use any custom css classes or any other css library. we will create bootstrap 5 404 not found page, 404 error page with image, we will design 404 page. first you need to setup bootstrap 5 project. you can use cdn or read below article.

view demo

Bootstrap 5 404 Page Examples

1) Simple bootstrap 5 404 Page.

<!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" />    <title>Bootstrap 5 404 Error Page</title>    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">  </head>  <body>    <div class="d-flex align-items-center justify-content-center vh-100 bg-primary">        <h1 class="display-1 fw-bold text-white">404</h1>    </div>  </body></html>

Bootstrap 5 404
2) Bootstrap 5 404 Page not found.

<!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" />        <title>Bootstrap 5 404 Error Page</title>        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">    </head>    <body>        <div class="d-flex align-items-center justify-content-center vh-100">            <div class="text-center">                <h1 class="display-1 fw-bold">404</h1>                <p class="fs-3"> <span class="text-danger">Opps!</span> Page not found.</p>                <p class="lead">                    The page youre looking for doesnt exist.                  </p>                <a href="index.html" class="btn btn-primary">Go Home</a>            </div>        </div>    </body></html>

Bootstrap 5 404 example

3) bootstrap 5 page with image.

<!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" />        <title>Bootstrap 5 404 page with image</title>        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">    </head>    <body>        <div class="d-flex align-items-center justify-content-center vh-100">            <div class="text-center row">                <div class=" col-md-6">                    <img src="https://cdn.pixabay.com/photo/2017/03/09/12/31/error-2129569__340.jpg" alt=""                        class="img-fluid">                </div>                <div class=" col-md-6 mt-5">                    <p class="fs-3"> <span class="text-danger">Opps!</span> Page not found.</p>                    <p class="lead">                        The page youre looking for doesnt exist.                    </p>                    <a href="index.html" class="btn btn-primary">Go Home</a>                </div>            </div>        </div>    </body></html>

Bootstrap 5 404 with Image

Read also

Bootstrap 5 Card Slider with Splide JS Example
Bootstrap 5 Login Form Page Example
Bootstrap 5 Gradient Button Example
How to install & setup bootstrap 5


Original Link: https://dev.to/frontendshape/bootstrap-5-404-page-examples-3ih

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To