Bootstrap Free 404 Error Page Template

How to use this Bootstrap snippet

4 4

Oops! You're lost.

The page you are looking for was not found.

Back to Home

How to use this Bootstrap Free 404 Error Page Template

Place the code in the <body> for Interface 
          
<!-- Error 404 Template 1 - Bootstrap Brain Component -->
<section class="py-3 py-md-5 min-vh-100 d-flex justify-content-center align-items-center">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="text-center">
          <h2 class="d-flex justify-content-center align-items-center gap-2 mb-4">
            <span class="display-1 fw-bold">4</span>
            <i class="bi bi-exclamation-circle-fill text-danger display-4"></i>
            <span class="display-1 fw-bold bsb-flip-h">4</span>
          </h2>
          <h3 class="h2 mb-2">Oops! You're lost.</h3>
          <p class="mb-5">The page you are looking for was not found.</p>
          <a class="btn bsb-btn-5xl btn-dark rounded-pill px-5 fs-6 m-0" href="#!" role="button">Back to Home</a>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/error-404s/error-404-1/assets/css/error-404-1.css">

This Bootstrap Free 404 Error Page Template is a pre-designed and readily available web page template tailored explicitly for handling 404 error pages within an admin dashboard or website. Leveraging the Bootstrap framework, this template offers a responsive and visually appealing layout that seamlessly adapts to various devices and screen sizes.