Bootstrap 5 404 Page Not Found Design HTML

Bootstrap 5 404 page design HTML. 404 page not found meaning is that the page not available or broken link in the website. This page not found design, we can use it when the user goes on the unknown page. Use Bootstrap 5 404 page design HTML in your project and avoid back bounce rate.

HTML

<!-- Not Found Page HTML -->
<div class="page-not-found pt-5">
    <div class="bg-light shadow">
        <h2>4<i class="bi bi-bug"></i>4</h2>
        <h3 class="mt-4">Opps! Page Not Found</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and<br>typesetting industry.</p>
        <div class="mt-5">
            <button type="button" class="btn m-2 m-md-0 btn-primary"><i class="bi bi-house-door-fill"></i> Back Home</button>
            <button type="button" class="btn m-2 m-md-0 btn-success"><i class="bi bi-person-lines-fill"></i> Contact Us</button>
        </div>
    </div>
</div>

CSS

.page-not-found {
    background-color: #3f51b5;
    height: 100vh;
}
.page-not-found h2 {
    font-size: 130px;
    color: #e91e63;
}
.page-not-found h3 {
    font-size: 42px;
}
.page-not-found .bg-light {
    width: 50%;
    padding: 50px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width:  767px) {
    .page-not-found h2 {
        font-size: 100px;
    }
    .page-not-found h3 {
        font-size: 28px;
    }
    .page-not-found .bg-light {
        width: 100%;
    }
}