How to Create a Custom Error Page in Laravel 10?

Spread the love

Hello Guys,

I will guide you on crafting a Custom Error Page in Laravel 10. We will follow Laravel 10’s guidelines for fashioning personalized 404 error pages. Witness how Laravel 10 effortlessly tailors a distinct error page for your needs. If you seek inspiration for a Laravel 10 404 error page, you’re in the right place.

Laravel’s default error pages sport a simple design, yet there are instances where a custom error page that aligns with your design aesthetics becomes essential. In this comprehensive guide, I will lead you through the step-by-step process of creating your very own bespoke error page for your Laravel 10 application.

For Custom Error Page in Laravel 10, you can produce the following error pages:
  • 401 Error Page
  • 403 Error Page
  • 404 Error Page
  • 419 Error Page
  • 429 Error Page
  • 500 Error Page
  • 503 Error Page

Modifying Laravel 10 App’s Error Page Design: A Step-by-Step Guide

Step 1: Publish Error Page Default Files

To generate Laravel’s default error page blade file, follow these steps:

  1. Execute a Laravel command.
  2. The error pages will be automatically created in the “errors” directory by Laravel.

Execute the command now.

Also Read: How to Get the Current URL in Laravel 10?

php artisan vendor:publish --tag=laravel-errors

Step 2: Update 404 Error Page Design

Optimize Your 404 Error Page Design with This Code

view/errors/404.blade.php

Also Read: How to Get the Last Inserted Id in Laravel 10?

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{
          margin-top: 150px;
          background-color: #C4CCD9;
        }
        .error-main{
          background-color: #fff;
          box-shadow: 0px 10px 10px -10px #5D6572;
        }
        .error-main h1{
          font-weight: bold;
          color: #444444;
          font-size: 150px;
          text-shadow: 2px 4px 5px #6E6E6E;
        }
        .error-main h6{
          color: #42494F;
          font-size: 20px;
        }
        .error-main p{
          color: #9897A0;
          font-size: 15px; 
        }
    </style>
</head>
<body>
  
    <div class="container">
      <div class="row text-center">
        <div class="col-lg-6 offset-lg-3 col-sm-6 offset-sm-3 col-12 p-3 error-main">
          <div class="row">
            <div class="col-lg-8 col-12 col-sm-10 offset-lg-2 offset-sm-1">
              <h1 class="m-0">404</h1>
              <h6>Page not found - itcodestuff.com</h6>
              <p>Lorem ipsum dolor sit <span class="text-info">amet</span>, consectetur <span class="text-info">adipisicing</span> elit, sed do eiusmod.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
      
</body>
</html>

Discover the best in Laravel blog through our thoughtfully crafted content.

Leave a Comment