How to Create Custom 404 Page in Laravel 10

- LAST UPDATED

Creating 404 pages in a custom PHP application is not that easy. But when it comes to Laravel it is pretty easy to create a simple 404 page. Laravel already has codes to handle exceptions like 404,500 and similar errors. And these errors are displayed in Laravel with its own simple UI. 

We can easily customize this page by adding 404.blade.php to resources/views/errors/ folder. 

Here we are assuming you already have a Laravel project. If not created any project, let's just follow this guide for creating your first Laravel project

Create Custom 404 Page in Laravel

As we discussed earlier, this is a pretty straightforward solution in Laravel.

Create a new page in Laravel in this location if it does not already exist.

resources/views/errors/404.blade.php

When we create a new page in Laravel in the resources/views/errors folder. When an error/exception occurs Laravel automatically looks for the blade template corresponding to the error code. Similar way we can create other error pages as well. 500.blade.php, 403.blade.php etc. 

Example 404 Page Using Bootstrap

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CodePlank 404 Page</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="d-flex align-items-center justify-content-center vh-100">
            <div class="text-center">
                <h1 class="display-1 fw-bold">404</h1>
                <p class="fs-3"> <span class="text-danger">Page not found.</span> </p>
                <p class="fs-2">
                    The page you're looking for doesn't exist.
                </p>
                <a href="https://codeplank.com/" class="btn btn-success btn-lg">GO HOME</a>
            </div>
        </div>
    </body>
</html>

If you are using artisan visit http://127.0.0.1:8000/404 to view the 404 page or use the specific domain for the purpose. Sample 404 using the above code will look like this.