How to Create Custom Error Page in Laravel 11?

By Hardik Savani April 16, 2024 Category : Laravel

In this article, I will show you how to create a custom error page in a Laravel 11 application. We can redesign 404, 500, 503, 419, 401 error pages in Laravel 11.

By default, Laravel provides a very simple design for all error pages, but sometimes we need to create a custom error page with our design theme. So here, I will show you step by step how to create your own custom error page design in the Laravel 11 application.

You can create the following error pages in laravel 11:

  • 401 Error Page

  • 403 Error Page

  • 404 Error Page

  • 419 Error Page

  • 429 Error Page

  • 500 Error Page

  • 503 Error Page

You can see the default 404 and 500 page designs below:

Default 404 Error Page

Default 500 Error Page

Now, let's see how to change the design of 404 and 500 error pages.

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Publish Error Page Default Files

In this step, we will run the Laravel command to create the default error page blade file. When you run the command below, Laravel will create an "errors" directory with all error pages in the views folder. So, let's run the command below:

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

Read Also: Laravel 11 CRUD Application Example Tutorial

Step 3: Update 404 Error Page Design

You can update 404 error page design with following code:

resources/views/errors/404.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 Server Error Page</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
    <style type="text/css">
        body {
          padding: 0;
          margin: 0;
        }

        #notfound {
          position: relative;
          height: 100vh;
        }

        #notfound .notfound-bg {
          position: absolute;
          width: 100%;
          height: 100%;
          background-size: cover;
        }

        #notfound .notfound-bg:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #BC3E25;
        }

        #notfound .notfound {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
        }

        .notfound {
          max-width: 910px;
          width: 100%;
          line-height: 1.4;
          text-align: center;
        }

        .notfound .notfound-404 {
          position: relative;
          height: 200px;
        }

        .notfound .notfound-404 h1 {
          font-family: 'Montserrat', sans-serif;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          font-size: 220px;
          font-weight: 900;
          margin: 0px;
          color: #fff;
          text-transform: uppercase;
          letter-spacing: 10px;
        }

        .notfound h2 {
          font-family: 'Montserrat', sans-serif;
          font-size: 22px;
          font-weight: 700;
          text-transform: uppercase;
          color: #fff;
          margin-top: 20px;
          margin-bottom: 15px;
        }

        .notfound .home-btn, .notfound .contact-btn {
          font-family: 'Montserrat', sans-serif;
          display: inline-block;
          font-weight: 700;
          text-decoration: none;
          background-color: transparent;
          border: 2px solid transparent;
          text-transform: uppercase;
          padding: 13px 25px;
          font-size: 18px;
          border-radius: 40px;
          margin: 7px;
          -webkit-transition: 0.2s all;
          transition: 0.2s all;
        }

        .notfound .home-btn:hover, .notfound .contact-btn:hover {
          opacity: 0.9;
        }

        .notfound .home-btn {
          color: rgba(255, 0, 36, 0.7);
          background: #fff;
        }

        .notfound .contact-btn {
          border: 2px solid rgba(255, 255, 255, 0.9);
          color: rgba(255, 255, 255, 0.9);
        }

        @media only screen and (max-width: 767px) {
          .notfound .notfound-404 h1 {
            font-size: 182px;
          }
        }

        @media only screen and (max-width: 480px) {
          .notfound .notfound-404 {
            height: 146px;
          }
          .notfound .notfound-404 h1 {
            font-size: 146px;
          }
          .notfound h2 {
            font-size: 16px;
          }
          .notfound .home-btn, .notfound .contact-btn {
            font-size: 14px;
          }
        }

    </style>
</head>
<body>

<div id="notfound">
    <div class="notfound-bg"></div>
    <div class="notfound">
        <div class="notfound-404">
            <h1>404</h1>
        </div>
        <h2>We are sorry. But the page you requested was not found</h2>
        <a href="#" class="home-btn">Go Home</a>
        <a href="#" class="contact-btn">Contact us</a>
    </div>
</div>

</body>
</html>

404 Error Page New Design:

Step 4: Update 500 Error Page Design

You can update 500 error page design with following code:

resources/views/errors/500.blade.php

Read Also: How to Get Current Full URL in Laravel 11?
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>500 Server Error Page</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
    <style type="text/css">
        body {
          padding: 0;
          margin: 0;
        }

        #notfound {
          position: relative;
          height: 100vh;
        }

        #notfound .notfound-bg {
          position: absolute;
          width: 100%;
          height: 100%;
          background-size: cover;
        }

        #notfound .notfound-bg:after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #BC3E25;
        }

        #notfound .notfound {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
        }

        .notfound {
          max-width: 910px;
          width: 100%;
          line-height: 1.4;
          text-align: center;
        }

        .notfound .notfound-500 {
          position: relative;
          height: 200px;
        }

        .notfound .notfound-500 h1 {
          font-family: 'Montserrat', sans-serif;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          font-size: 220px;
          font-weight: 900;
          margin: 0px;
          color: #fff;
          text-transform: uppercase;
          letter-spacing: 10px;
        }

        .notfound h2 {
          font-family: 'Montserrat', sans-serif;
          font-size: 22px;
          font-weight: 700;
          text-transform: uppercase;
          color: #fff;
          margin-top: 20px;
          margin-bottom: 15px;
        }

        .notfound .home-btn, .notfound .contact-btn {
          font-family: 'Montserrat', sans-serif;
          display: inline-block;
          font-weight: 700;
          text-decoration: none;
          background-color: transparent;
          border: 2px solid transparent;
          text-transform: uppercase;
          padding: 13px 25px;
          font-size: 18px;
          border-radius: 40px;
          margin: 7px;
          -webkit-transition: 0.2s all;
          transition: 0.2s all;
        }

        .notfound .home-btn:hover, .notfound .contact-btn:hover {
          opacity: 0.9;
        }

        .notfound .home-btn {
          color: rgba(255, 0, 36, 0.7);
          background: #fff;
        }

        .notfound .contact-btn {
          border: 2px solid rgba(255, 255, 255, 0.9);
          color: rgba(255, 255, 255, 0.9);
        }

        @media only screen and (max-width: 767px) {
          .notfound .notfound-500 h1 {
            font-size: 182px;
          }
        }

        @media only screen and (max-width: 480px) {
          .notfound .notfound-500 {
            height: 146px;
          }
          .notfound .notfound-500 h1 {
            font-size: 146px;
          }
          .notfound h2 {
            font-size: 16px;
          }
          .notfound .home-btn, .notfound .contact-btn {
            font-size: 14px;
          }
        }

    </style>
</head>
<body>

<div id="notfound">
    <div class="notfound-bg"></div>
    <div class="notfound">
        <div class="notfound-500">
            <h1>500</h1>
        </div>
        <h2>Opps! Internal Server Error. Something is wrong.</h2>
        <a href="#" class="home-btn">Go Home</a>
        <a href="#" class="contact-btn">Contact us</a>
    </div>
</div>

</body>
</html>

500 Error Page New Design:

I hope it can help you...

Tags :
Previous

How to Get Current Full URL in Laravel 11?
Next

Laravel 11 One to One Relationship Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares