How to Create a Custom 404 error page in Laravel 8 ?

In this tutorial, I will give you an example of “How to Create a Custom 404 error page in Laravel”, So you can easily apply it with your laravel 5, laravel 6, laravel 7, and laravel 8 application.

First, what we’re doing here, This is the example :

How to Create a Custom 404 error page in Laravel 8 ?

404 page in Laravel

A 404 page is also known as an “error page” and “Page Not Found” page. This page indicates that the user reached the domain they requested, but the URL path provided no information.

When someone hits a route that is not present, your laravel application shows an error. It affects your SEO as well.

So, let’s see how we can create a Custom 404 page in the Laravel application.

At first, we will create a folder name errors and then we will create a 404 blade file under the errors folder and write some Html code for better alignments.

resources\views\errors\404.blade.php

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.error-404 {
  margin: 0 auto;
  text-align: center;
}
.error-404 .error-code {
  bottom: 60%;
  color: #4686CC;
  font-size: 96px;
  line-height: 100px;
  font-weight: bold;
}
.error-404 .error-desc {
  font-size: 14px;
  color: #647788;
}
.error-404 .m-b-10 {
  margin-bottom: 10px!important;
}
.error-404 .m-b-20 {
  margin-bottom: 20px!important;
}
.error-404 .m-t-20 {
  margin-top: 20px!important;
}

</style>
<div class="error-404">
    <div class="error-code m-b-10 m-t-20">404 <i class="fa fa-warning"></i></div>
    <h2 class="font-bold">Oops 404! That page can’t be found.</h2>

    <div class="error-desc">
        Sorry, but the page you are looking for was either not found or does not exist. <br/>
        Try refreshing the page or click the button below to go back to the Homepage.
        <div><br/>
           <a href="/" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span>  Go back to Homepage</a>
        </div>
    </div>
</div>

Now, hit a route that is not present in your Laravel application.

In this article, we learned “How to Create a Custom 404 error page in Laravel”, I hope this article will help you with your Laravel application Project.

Read also: Implement Google Captcha in Laravel 8.