Laravel is the most popular PHP framework out there. Using Laravel, you can create beautiful and robust web applications with ease. Moreover, Laravel provides many features out of the box to help you build your web application and one such feature is custom error pages. Today, I’m going to show you how to create a custom 404 page in Laravel 7.

What Is a 404 Error?

HTTP error codes are a series of HTTP response codes that indicate that the HTTP request made by a client was not successful. A request can fail due to many reasons. Usually, any response code starting with 4xx or 5xx indicates an error. Specifically, a 404 is an error that signifies that the server could not find the resource requested by a client. A resource can mean many things such as a webpage, static file, image, etc.

Therefore, we return a 404 error page whenever a user tries to access something that doesn’t exist.

Laravel’s Default Error Handling

Laravel’s error handling infrastructure is quite sound. Laravel can handle code exceptions and convert them into standard HTTP error responses by default. Laravel 7 can handle most of the usual HTTP errors and includes default routes and view for the most common HTTP error responses. These errors are triggered whenever something breaks in your application. For example, a code exception, user input validation fail, etc.

Here is a how a default 404 page looks like in Laravel:

Laravel_Default_Error_Page

As you can see, it’s very simple and doesn’t even provide a link to go back t the homepage. Luckily, we can easily change this page to look a lot better and be more functional at the same time, which is what you’ll learn in this tutorial.

We’re assuming that you have already set up your Laravel project so we’ll dive straight into customizing the error page.

Publish Laravel’s Default Error Page

At the beginning of this article, we saw how Laravel’s default 404 page looks. Now we will publish the same file into our project. Publishing the files will bring them from the vendor directory to the resources/views/errors/ directory. Once these files are in our project, we can edit them and customize them to our liking.

php artisan vendor:publish --tag=laravel-errors

After running this command, go to the resources/views/errors directory and you should see all the error files.

Laravel Default Error Pages

The 404.blade.php file is the view that is displayed whenever there is a 404 error.

Customize the 404 Error Page

Now that we have access to the default 404 views, we can edit it. You can either edit it according to your design or use the one that you’ll find in this section.

Replace the content of 404.blade.php with the following HTML:

<!DOCTYPE HTML>
<html>
	<head>
		<title>How to Create a Custom 404 Page in Laravel 7</title>
		<meta name="keywords" content="404 iphone web template, Android web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
		<link href="{{ asset('css/404.css') }}" rel="stylesheet" type="text/css"  media="all" />

	</head>
	<body>
		<!--start-wrap--->
		<div class="wrap">
			<!---start-header---->
				<div class="header">
					<div class="logo">
						<h1><a href="#">Ohh</a></h1>
					</div>
				</div>
			<!---End-header---->
			<!--start-content------>
			<div class="content">
				<img src="https://p.w3layouts.com/demos/ohh/web/images/error-img.png" title="error" />
				<p><span><label>O</label>hh.....</span>You Requested the page that is no longer There.</p>
				<a href="/">Back To Home</a>
   			</div>
			<!--End-Cotent------>
		</div>
		<!--End-wrap--->
	</body>
</html>

Create a CSS file named 404.css (or 404.scss) and add the following CSS styles:

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*
 */
body{
	background: url(../images/bg1.png);
	font-family: "Century Gothic",Arial, Helvetica, sans-serif;
	}
.content p{
	margin: 18px 0px 45px 0px;
}
.content p{
	font-family: "Century Gothic";
	font-size:2em;
	color:#666;
	text-align:center;
}
.content p span,.logo h1 a{
	color:#e54040;
}
.content{
	text-align:center;
	padding:115px 0px 0px 0px;
}
.content a{
	color:#fff;
	font-family: "Century Gothic";
	background: #666666; /* Old browsers */
	background: -moz-linear-gradient(top,  #666666 0%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #666666 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #666666 0%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #666666 0%,#666666 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #666666 0%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	padding: 15px 20px;
	border-radius: 1em;
}
.content a:hover{
	color:#e54040;
}
.logo{
	text-align:center;
	-webkit-box-shadow: 0 8px 6px -6px rgb(97, 97, 97);
	-moz-box-shadow: 0 8px 6px -6px  rgb(97, 97, 97);
	box-shadow: 0 8px 6px -6px  rgb(97, 97, 97);
}
.logo h1{
	font-size:2em;
	font-family: "Century Gothic";
	background: #666666; /* Old browsers */
	background: -moz-linear-gradient(top,  #666666 0%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #666666 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #666666 0%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #666666 0%,#666666 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #666666 0%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	padding: 10px 10px 18px 10px;
}
.logo h1 a{
	font-size:1em;
}
.copy-right{
	padding-top:20px;
}
.copy-right p{
	font-size:0.9em;
}
.copy-right p a{
	background:none;
	color:#e54040;
	padding:0px 0px 5px 0px;
	font-size:0.9em;
}
.copy-right p a:hover{
	color:#666;
}
/*------responive-design--------*/
@media screen and (max-width: 1366px)	{
	.content {
		padding: 58px 0px 0px 0px;
	}
}
@media screen and (max-width:1280px)	{
	.content {
		padding: 58px 0px 0px 0px;
	}
}
@media screen and (max-width:1024px)	{
	.content {
		padding: 58px 0px 0px 0px;
	}
	.content p {
		font-size: 1.5em;
	}
	.copy-right p{
		font-size:0.9em;
	}
}
@media screen and (max-width:640px)	{
	.content {
		padding: 58px 0px 0px 0px;
	}
	.content p {
		font-size: 1.3em;
	}
	.copy-right p{
		font-size:0.9em;
	}
}
@media screen and (max-width:460px)	{
	.content {
		padding:20px 0px 0px 0px;
		margin:0px 12px;
	}
	.content p {
		font-size:0.9em;
	}
	.copy-right p{
		font-size:0.8em;
	}
}
@media screen and (max-width:320px)	{
	.content {
		padding:30px 0px 0px 0px;
		margin:0px 12px;
	}
	.content a {
		padding:10px 15px;
		font-size:0.8em;
	}
	.content p {
		margin: 18px 0px 22px 0px;
	}
}

That’s it! Now go ahead and try to visit a page that does not exist and you should see the following error:

custom_404_page

What about other HTTP Errors?

The procedure is exactly the same for other HTTP errors as well. With the steps mentioned above, you can create custom error pages for 401, 403, 419, 429, 500, and 503 HTTP error codes.

That’s how you can customize a 404 page easily in Laravel 7. The source code for the project used in this tutorial is available on my GitHub repository.

If you are still learning Laravel, then you should check out our collection of Laravel tutorials.