bulma css 404 page examples

Bulma CSS 404 Page Examples

updated 19/09/22 By frontendshape

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> 
bulma css 404 page

bulma css 404 page

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>
bulma css 404 page not found

bulma css 404 page not found


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>
bulma css 404 page with image

bulma css 404 page with image


Read Also

Bulma CSS Responsive Navbar Menu

Bulma CSS Login Form Page Example

Bulma CSS Registration Form Page Example