Bootstrap 404 Page Template

Posted onby admin

Bootstrap Templates & Themes. Free Bootstrap themes that are ready to customize and publish. All of our themes are built with Bootstrap 4, MIT licensed, and updated regularly! All Admin & Dashboard Landing Pages Business & Corporate Portfolio & Resume General Page Layouts Navigation Layouts Ecommerce Blog & News. Material Dashboard. Material Dashboard is an admin template that has been inspired by the Google. Bootstrap Landing Page Themes. Free Bootstrap themes that are ready to customize and publish. All of our themes are built with Bootstrap 4, MIT licensed, and updated regularly! This 404 page uses a bright pop of orange on their 404 page. The orange color works so well because it relates to the orange image in the 404. The subtle gradient helps cut any harshness that could be, and leaves this 404 page with a nice, happy brightness.


It is bound to happen. Sooner or later, somebody is going to type in a wrong URL or follow a broken link to your site. This is when the notorious 404 page is displayed. To make the experience less frustrating, you can take the time and design a friendly error page, which will encourage your user to stay at your web site.

Today we are making just that. We are going to create an animated 404 page, which you can easily customize and improve.

Bootstrap 404 Page Template


As usual, we start off with the HTML markup. Here we are using the new HTML5 doctype and the new hgroup tag. In the head section, we are including the HTML5 enabling script for IE inside a conditional comment. This script will help Internet Explorer understand the new HTML5 tags.


After the HTML5 enabling script, we include the stylesheet, an excerpt of which is given in the next section. Inside the body tag, you can see the #rocket div and the aforementioned hgroup. The #rocket div has rocket.png as its background, and it has a number of styles applied, including relative positioning, which is needed for the animation, as you will see in a moment.

Simple 404 page

Lastly we have the jQuery library and our script.js file, also discussed in the next sections.

The page is minimalistic and presents only basic information to the user. You could improve it by including a more site-specific message and a link to your homepage (or other resources you find suitable).


Now lets move on to the styling. As mentioned in the HTML part of the tut, the #rocket div's positioning is set to relative. This allows us to insert the absolutely positioned spans, which form the exhaust gases coming out of the engine, and offset them with regards to the rocket.

Each steam span is 80px wide by 80px high, and is assigned steam.png as its background. This image is twice the height of the spans, and actually contains two versions of the steam - white and black.The steam1 and steam2 classes show the respective version of the image. The light version of the steam creates the illusion of smoke, whereas the black one makes the flames of the rocket engine flicker.

jQuery creates and inserts the steam spans into the #rocket container, and moves them in the opposite direction of the movement of the rocket with the animate method, as you will see in a few moments.

The jQuery

As we discussed above, jQuery's part is to create the animation of the exhaust gases. Lets take a closer look at how this is achieved.

The script begins with attaching an event listener to the window load event. This differs from the document ready event we usually target, in that window.load is fired when not only the DOM, but images as well are loaded. This way we can be sure that the user is not going to see the smoke of the rocket before rocket.png is loaded.

The animSteam() function is what creates the smoke effect. When called, the function runs an animation, which, when complete, uses setTimeout to schedule the same function to be run again in 10 milliseconds. This prevents build ups - starting a second animation before the first has completed.

The script chooses randomly between the steam1 and steam2 classes on line 10 and offsets the span horizontally with a random value of margin-left. In the animate() method, later in the chain, we tell jQuery to start an animation from the current position of the steam div (which is exactly over the nozzle of the rocket) and move the element 58 pixels to the left and 100 pixels to the bottom.


After this we pass the duration of the animation - 120 milliseconds, and a callback function, which will be executed after the animation completes.

The other animation function - moveRocket() slowly moves the rocket to the left and right by modifying the left CSS property. Both functions are called once at the end of the file. If you want to disable one of the animations, just comment out the respective function call.

With this our Animated 404 Page is complete!


Remember, that to make the page show up when a 404 error actually occurs, you need to add this line to your .htaccess file:

Error 404 Template

This will output the page with the appropriate headers, given that you've placed it in your root folder. You can also add more helpful information to the page, such as links to your home page, a more personalized message or even a way for users to report the errors they've encountered.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Bootstrap 404 Page Template

Learn more