Bootstrap

Custom 404 Error Page in ASP.NET Using Bootstrap 5

Every professional web application needs a well-designed error page. Rather than showing a plain "404 - Page Not Found" message, why not enhance the user experience with style and structure?

In this blog post, I will share two unique custom 404 error pages built using ASP.NET Web Forms, HTML/CSS, Google Fonts, and animations. Let’s explore both designs and their full implementation.

Error Page Demo 1 Clean & Professional Design with Bootstrap

This version is clean, minimalistic, and user-friendly. It's designed with Bootstrap 5 and the Poppins font for a corporate feel.

Key Features

  • Responsive layout using Bootstrap 5
  • Smooth bounce animation for the error code
  • Linear gradient background for a soft visual tone
  • CTA button to redirect users to the Dashboard

Full Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ErrorPage-Demo1.aspx.cs" Inherits="TaskPractices.ErrorPage.ErrorPage_Demo1" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Error - Page Not Found</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(to right, #e3f2fd, #fce4ec);
            color: #333;
            height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .error-container {
            text-align: center;
        }
        .error-code {
            font-size: 8rem;
            font-weight: bold;
            color: #d32f2f;
            animation: bounce 1s infinite alternate;
        }
        .error-message {
            font-size: 1.5rem;
            margin-top: 1rem;
        }
        .error-description {
            margin-top: 0.5rem;
            font-size: 1rem;
            color: #555;
        }
        .btn-home {
            margin-top: 2rem;
            background-color: #1976d2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
        }
        .homebtn {
            margin-top: 50px;
        }
        .btn-home:hover {
            background-color: #0d47a1;
        }
        @keyframes bounce {
            from {
                transform: translateY(0px);
            }
            to {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
<body>

    <div class="error-container">
        <div class="error-code">404</div>
        <div class="error-message">Oops! Page Not Found</div>
        <div class="error-description">
            The page you're looking for doesn't exist or was moved.<br>
            Let's get you back to something useful.
        </div>
        <div class="homebtn">
            <a href="../Dashboard.aspx" class="btn-home">Go to Homepage</a>
        </div>
    </div>

</body>
</html>

Result

Error

Error Page Demo 2 – Futuristic Glitch Animation

This version is ideal for creative portfolios, digital agencies, or tech startups. It features a glitch animation, neon color schemes, and Orbitron font.

Key Features

  • Custom glitch effect using pure CSS
  • Full-screen black background with vibrant colors
  • Futuristic style with a strong visual impact
  • Call to action button with hover transition

Full Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ErrorPage-Demo2.aspx.cs" Inherits="TaskPractices.ErrorPage.ErrorPage_Demo2" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>404 - Page Not Found</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Montserrat&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      background: #0d0d0d;
      font-family: 'Montserrat', sans-serif;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      flex-direction: column;
      text-align: center;
    }

    .glitch {
      font-family: 'Orbitron', sans-serif;
      font-size: 8rem;
      position: relative;
      color: #fff;
    }

    .glitch::before,
    .glitch::after {
      content: '404';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      color: #ff00c8;
      z-index: -1;
    }

    .glitch::before {
      animation: glitchTop 1.5s infinite linear alternate-reverse;
    }

    .glitch::after {
      color: #00ffe7;
      animation: glitchBottom 1.5s infinite linear alternate-reverse;
    }

    @keyframes glitchTop {
      0% { clip-path: inset(0 0 90% 0); transform: translate(-2px, -2px); }
      100% { clip-path: inset(0 0 10% 0); transform: translate(2px, 2px); }
    }

    @keyframes glitchBottom {
      0% { clip-path: inset(90% 0 0 0); transform: translate(-2px, 2px); }
      100% { clip-path: inset(10% 0 0 0); transform: translate(2px, -2px); }
    }

    .message {
      font-size: 1.5rem;
      margin: 20px 0;
      color: #c0c0c0;
    }

    .back-btn {
      background: #00ffe7;
      color: #000;
      padding: 12px 30px;
      border: none;
      font-size: 1rem;
      border-radius: 30px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .back-btn:hover {
      background: #ff00c8;
      color: #fff;
    }
  </style>
</head>
<body>

  <div class="glitch">404</div>
  <div class="message">Oops! The page you're looking for doesn't exist.</div>
  <a href="/" class="back-btn">Go Home</a>

</body>
</html>

Result

Error2
Membership not found