Welcome to today’s tutorial. In today’s tutorial, we will create a 404 error page using Bulma CSS. For this 404 template create bulma css 404 not found page, 404 error page with image, we will design 404 page.
Bulma CSS 404 Page Example
1. Bulma CSS simple 404 page.
<!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>Bulma CSS 404 Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<div class="is-flex is-justify-content-center is-align-items-center has-background-dark" style=" height: 100vh;">
<div>
<h1 class="is-size-1 has-text-weight-bold has-text-white">404</h1>
</div>
</div>
</body>
</html>
2. Bulma CSS 404 Page not found.
<!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>Bulma CSS 404 Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<div class="is-flex is-justify-content-center is-align-items-center" style=" height: 100vh;">
<div class="has-text-centered">
<h1 class="is-size-1 has-text-weight-bold has-text-primary">404</h1>
<p class="is-size-5 has-text-weight-medium"> <span class="has-text-danger">Opps!</span> Page not found.</p>
<p class="is-size-6 mb-2">
The page you’re looking for doesn’t exist.
</p>
<a href="index.html" class="button is-primary">Go Home</a>
</div>
</div>
</body>
</html>
3. Bulma CSS 404 page with image.
<!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>Bulma CSS 404 Page With Image</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<div class="is-flex is-justify-content-center is-align-items-center" style=" height: 100vh;">
<div class="columns">
<div class="is-half mr-5 mb-5">
<img src="404.svg" alt="404 svg image">
</div>
<div class="has-text-centered is-half ml-4 mt-5">
<h1 class="is-size-1 has-text-weight-bold has-text-primary">404</h1>
<p class="is-size-5 has-text-weight-medium"> <span class="has-text-danger">Opps!</span> Page not
found.</p>
<p class="is-size-6 mb-2">
The page you’re looking for doesn’t exist.
</p>
<a href="index.html" class="button is-primary">Go Home</a>
</div>
</div>
</div>
</body>
</html>
Read Also
Bulma CSS Responsive Navbar Menu