Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/create-laravel-8-404-custom-page-example
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.
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/create-laravel-8-404-custom-page-example if you want to download this code.
Happy coding :)
Top comments (0)