Table of contents

laravel 404

In this post, I will show you an example of how to create a Laravel 8 404 custom page in your project. If you don't want to use the Laravel 404-page default and want to create a custom page. Then just follow the simple tutorial below.

 

We know that the 404 page will throw an error page if your user input an existing route or URL to your Laravel 8 application.

 

Below are the simple steps on how to implement the Laravel 404 custom page.

 

Step 1: Laravel installation

We must install first our Laravel 8 project for demo purposes only. If you don't have just skip this section. To install the Laravel just run the following command:

composer create-project laravel/laravel laravel-404

 

Step 2: Create Custom Laravel 404 Error Page

Now we need to create our custom Laravel 404 error page just navigate resources/views/ folder and create a folder called errors folder then create a file called 404.blade.php. Then your blade created will be automatically displayed if the user visits a not existing URL in your project.

 

Here is our custom Laravel 404 error page blade template. Copy the below code to your 404.blade.php template.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel 8 Custom 404 Page Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

    <style type="text/css">
        body { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8yOS8xMiKqq3kAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABHklEQVRIib2Vyw6EIAxFW5idr///Qx9sfG3pLEyJ3tAwi5EmBqRo7vHawiEEERHS6x7MTMxMVv6+z3tPMUYSkfTM/R0fEaG2bbMv+Gc4nZzn+dN4HAcREa3r+hi3bcuu68jLskhVIlW073tWaYlQ9+F9IpqmSfq+fwskhdO/AwmUTJXrOuaRQNeRkOd5lq7rXmS5InmERKoER/QMvUAPlZDHcZRhGN4CSeGY+aHMqgcks5RrHv/eeh455x5KrMq2yHQdibDO6ncG/KZWL7M8xDyS1/MIO0NJqdULLS81X6/X6aR0nqBSJcPeZnlZrzN477NKURn2Nus8sjzmEII0TfMiyxUuxphVWjpJkbx0btUnshRihVv70Bv8ItXq6Asoi/ZiCbU6YgAAAABJRU5ErkJggg==);}
            .error-template {padding: 40px 15px;text-align: center;}
            .error-actions {margin-top:15px;margin-bottom:15px;}
            .error-actions .btn { margin-right:10px; }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="error-template">
                    <h1>
                        Oops!</h1>
                    <h2>
                        404 Not Found</h2>
                    <div class="error-details">
                        Sorry, an error has occured, Requested page not found!
                    </div>
                    <div class="error-actions">
                        <a href="https://codeanddeploy.com" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-home"></span>
                            Take Me Home </a><a href="https://codeanddeploy.com" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-envelope"></span> Contact Support </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

Step 3: Testing Result

Now, let's test your 404 custom page. Run the following command:

php artisan serve

 

Then in your browser address bar try to run the following URL:

http://127.0.0.1:8000/not-found

 

Then this will display to your browser.

laravel 404

As you can see we successfully created our Laravel 404 custom page. I hope it helps. Thank you for visiting.

Read next