How to Create Custom 404 Page in Laravel 10 / 9 / 8 / 7 Application

By Ved Prakash N | Aug 11, 2023 | Laravel
Share :

https://www.fundaofwebit.com/post/how-to-create-custom-404-page-in-laravel-10-application

How to Create Custom 404 Page in Laravel 9 / 10  Application. 

In this article, you will be learning how to customize a 404 page in Laravel application. It is a very simple process to create a 404 page in Laravel, so let's get started.


Create Custom 404 Error Page


Step 1: Create a folder named errors as follows:

Create a "errors" folder within the "resources/views/" directory. Inside this folder, generate or create a "404.blade.php" file. This setup ensures that when the associated URL is not found, users will be redirected to the 404 page.

To illustrate, the final path structure should be "resources/views/errors/404.blade.php".

Additional Info: For the remaining error handling views (403, 500, 419, 255, and 405 exceptions), follow a similar approach to create dedicated blade files in the "errors" folder. This strategy helps maintain a consistent and organized structure for handling various error scenarios.


Step 2: Let's open the above created blade file "404.blade.php" from the path: "resources/views/errors/404.blade.php" and paste the below content in it:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 - Error Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body class="bg-dark d-flex align-items-center justify-content-center min-vh-100">

    <div class="container">
        <div class="p-5 m-5 text-center">
            <div class="card p-5 rounded-5">
                <h1 class="display-1 fw-bold">404</h1>
                <h3 class="display-6">Page Not Found</h3>
                <hr>
                <p class="lead fw-normal">
                    Hey, the page you are trying to find is not available
                </p>
                <div class="mt-3">
                    <a href="{{ url('/') }}" class="btn btn-primary rounded-5 px-5">Go to Home</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>


Step 3: Let's serve the application by the following command:

php artisan serve


As you know, 404 errors occur when you visit the non-existed link, so type the wrong URL in the browser’s address bar.

http://127.0.0.1:8000/dont-know-url


That's it guys. I hope it helps you.

https://www.fundaofwebit.com/post/how-to-create-custom-404-page-in-laravel-10-application

Share this blog on social platforms