May 9, 2025
Headlines

ASP.NET Custom 404 Error Page with Bootstrap 5

Craig Johnson09 mins

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/bootstrap@5.3.0/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 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

Best and Most Recommended ASP.NET Core 8.0.11 Hosting

Fortunately, there are a number of dependable and recommended web hosts available that can help you gain control of your website’s performance and improve your ASP.NET Core 8.0.11 web ranking. HostForLIFE.eu is highly recommended. In Europe, HostForLIFE.eu is the most popular option for first-time web hosts searching for an affordable plan.

Their standard price begins at only €3.49 per month. Customers are permitted to choose quarterly and annual plans based on their preferences. HostForLIFE.eu guarantees “No Hidden Fees” and an industry-leading ’30 Days Cash Back’ policy. Customers who terminate their service within the first thirty days are eligible for a full refund.

By providing reseller hosting accounts, HostForLIFE.eu also gives its consumers the chance to generate income. You can purchase their reseller hosting account, host an unlimited number of websites on it, and even sell some of your hosting space to others. This is one of the most effective methods for making money online. They will take care of all your customers’ hosting needs, so you do not need to fret about hosting-related matters.

 

Related News