Bootstrap error page

Welcome to today’s tutorial. In today’s tutorial, we will create a 404 error page using bootstrap 5....

Cover image for Bootstrap 5 404 Page Examples

frontendshape

Welcome to today’s tutorial. In today’s tutorial, we will create a 404 error page using bootstrap 5. For this 404 template we will not use any custom css classes or any other css library. we will create bootstrap 5 404 not found page, 404 error page with image, we will design 404 page. first you need to setup bootstrap 5 project. you can use cdn or read below article.

view demo

Bootstrap 5 404 Page Examples

1) Simple bootstrap 5 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>Bootstrap 5 404 Error Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="d-flex align-items-center justify-content-center vh-100 bg-primary">
        <h1 class="display-1 fw-bold text-white">404</h1>
    </div>
  </body>

</html>

Enter fullscreen mode

Exit fullscreen mode

Bootstrap 5 404
2) Bootstrap 5 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>Bootstrap 5 404 Error Page</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>


    <body>
        <div class="d-flex align-items-center justify-content-center vh-100">
            <div class="text-center">
                <h1 class="display-1 fw-bold">404</h1>
                <p class="fs-3"> <span class="text-danger">Opps!</span> Page not found.</p>
                <p class="lead">
                    The page you’re looking for doesn’t exist.
                  </p>
                <a href="index.html" class="btn btn-primary">Go Home</a>
            </div>
        </div>
    </body>


</html>

Enter fullscreen mode

Exit fullscreen mode

Bootstrap 5 404 example

3) bootstrap 5 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>Bootstrap 5 404 page with image</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="d-flex align-items-center justify-content-center vh-100">
            <div class="text-center row">
                <div class=" col-md-6">
                    <img src="https://cdn.pixabay.com/photo/2017/03/09/12/31/error-2129569__340.jpg" alt=""
                        class="img-fluid">
                </div>
                <div class=" col-md-6 mt-5">
                    <p class="fs-3"> <span class="text-danger">Opps!</span> Page not found.</p>
                    <p class="lead">
                        The page you’re looking for doesn’t exist.
                    </p>
                    <a href="index.html" class="btn btn-primary">Go Home</a>
                </div>

            </div>
        </div>
    </body>

</html>

Enter fullscreen mode

Exit fullscreen mode

Bootstrap 5 404 with Image

Read also

Bootstrap 5 Card Slider with Splide JS Example
Bootstrap 5 Login Form Page Example
Bootstrap 5 Gradient Button Example
How to install & setup bootstrap 5

Источник

Wow! Now confuse which one to select. Will try few from 

https://www.technicalarp.com/2022/01/free-404-error-page-html-template.html

.

Thanks

arpdemo () — 1 year ago — Reply 0

Wow! Now confuse which one to select. Will try few from 

https://www.technicalarp.com/2022/01/free-404-error-page-html-template.html

.

Thanks

arpdemo () — 1 year ago — Reply 0

Wow! Now confuse which one to select. Will try few from https://www.technicalarp.com/2022/01/free-404-error-page-html-template.html .

Thanks

arpdemo () — 1 year ago — Reply 0

Wow! Now confuse which one to select. Will try few of <a href=»https://www.technicalarp.com/2022/01/free-404-error-page-html-template.html»> 404 error page templates </a>.

Thanks

arpdemo () — 1 year ago — Reply 0

Wow! Now confuse which one to select. Will try few of <a href=»https://www.technicalarp.com/2022/01/free-404-error-page-html-template.html» rel=»dofollow»> 404 error page templates </a>.

Thanks

arpdemo () — 1 year ago — Reply 0

<script>alert(«aasda»)</script>

fofego3336zefaracom () — 1 year ago — Reply 0

<script>alert(«aasda»)</script>

fofego3336zefaracom () — 1 year ago — Reply 0

<script>alert(«aasda»)</script>

fofego3336zefaracom () — 1 year ago — Reply 0

<script>alert(«aasda»)</script>

fofego3336zefaracom () — 1 year ago — Reply 0

<script>alert(«aasda»)</script>

fofego3336zefaracom () — 1 year ago — Reply 0

fofego3336zefaracom () — 1 year ago — Reply 0

asdasdasdasdas

deneme55 () — 1 year ago — Reply 0

fofego3336zefaracom () — 1 year ago — Reply 0

fofego3336zefaracom () — 1 year ago — Reply 0

fofego3336zefaracom () — 1 year ago — Reply 0

Be simple to be Nice , my conclusion from those templates , thanks a lot =D

Faiçal Asmai () — 5 years ago — Reply 0

I liked the simplicity of this design. Few Years back when IE was dominant, there used to be the annoying default page for 404.Gladly things have changed now. Anyway thanks. Also if someone wanna check the Story behind 404 then it can be read here http://abbasharoon.me/404-r…

Abbas Haroon () — 6 years ago — Reply 0

Very handy i agree!

Ellahworks.com () — 6 years ago — Reply 0

thanks, inspired me to modify it

Adi Fahmi () — 7 years ago — Reply 0

This is perfect! Thank you!

Sri () — 7 years ago — Reply 0

Gracias muy bueno :D

Angel Buzany () — 7 years ago — Reply 0

Word occurred is misspelled.

Slobodan Stanić () — 7 years ago — Reply 0

Nice, thanks a lot :D

Thos Tampol () — 7 years ago — Reply 0

Super! Danke für das Bereitstellen. :-)

Mario () — 8 years ago — Reply 0

Very handy 404 page. Thanks for sharing BhaumikPatel :)

AZU AZU () — 9 years ago — Reply 0

Источник

Single 404 error page design usign bootstrap 4. 404 error page nice design. you can just copy past in your website project. this is sample of 404 page not found error page design. simple 404 page design usign html,css and bootstrap.

We allows to free snippets of bootstrap 404 page , you can download full code of bootstrap 4 error page layout. Here in this post i will give you example of bootstrap unauthorized page snippet and you will get simple code of html, css and jquery. In bootstrap 403 page template snippet i give you three tab with html, css and js, you can easily get code of 404 error page html code layout.

<!DOCTYPE html>
<html lang=»en»>
<head>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css» integrity=»sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb» crossorigin=»anonymous»>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js» integrity=»sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ» crossorigin=»anonymous»></script>
<link rel=»stylesheet» href=»custom.css»>
</head>
<body>
<div class=»container»>
<div class=»row text-center»>
<div class=»col-lg-6 offset-lg-3 col-sm-6 offset-sm-3 col-12 p-3 error-main»>
<div class=»row»>
<div class=»col-lg-8 col-12 col-sm-10 offset-lg-2 offset-sm-1″>
<h1 class=»m-0″>404</h1>
<h6>Page not found</h6>
<p>Lorem ipsum dolor sit <span class=»text-info»>amet</span>, consectetur <span class=»text-info»>adipisicing</span> elit, sed do eiusmod.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

body{
margin-top: 150px;
background-color: #C4CCD9;
}
.error-main{
background-color: #fff;
box-shadow: 0px 10px 10px -10px #5D6572;
}
.error-main h1{
font-weight: bold;
color: #444444;
font-size: 100px;
text-shadow: 2px 4px 5px #6E6E6E;
}
.error-main h6{
color: #42494F;
}
.error-main p{
color: #9897A0;
font-size: 14px;
}

Источник

How can we create a custom error 404 page using HTML CSS & JS? Solution: Check out this custom Error 404 Page With Counting Numbers Using CSS Bootstrap.

Previously I have shared an Animated Error 404 Page Design With Particle JS, But this one is with counting numbers effect. Basically, 404 is error message for page not found in Hypertext Transfer Protocol standard response code. When anyone clicks on a broken link on the webpage, then the page appears.

Today you will learn to create a 404 page design with counting numbers effect. There is an animated counting numbers effect in the 404 code, and also a massage page not found in the downside. Also, there is a double-side slant section outside the zero of 404, that creates the design more attractive.

So, Today I am sharing Custom Error 404 Page With Counting Numbers Using CSS Bootstrap. This is a responsive design means it will fit on every screen size. And there is a counting number effect which is powered by pure JavaScript, there is not any library. I think this program or design will be very useful for your website or any other project.

If you are thinking now how this 404 page actually is, then see the preview given below.

Preview Of Page Not Found Design

See this video preview to getting an idea of how this error page looks like.

Live Demo

Now you can see this visually, You also can see it live by pressing the button above. If you like this, then get the source code of its.

You May Also Like:

  • Random Password Generator
  • First and Last Word Selector
  • CSS Blend Modes Change
  • Animated Scrolling Images

Custom Error 404 Page With Counting Numbers Effect Source Code

Before sharing source code, let’s talk about it. First I have created 3 HTML span inside divs and put two class names. After that, I have put a page not found message in heading tag. Also, there are many more divs or sections for multiple purposes like shadow, outside circle, etc.

Using CSS I have done many works, like place elements on the right place, styling all content, etc. There I have created a slant section outside of the middle number which is zero, you can see in the preview at actual things what I am talking about. As you know this is also a responsive design, I have used CSS @keyframe property to creating it responsive.

Now using JavaScript I have created the counting numbers effect. For counting effect used JavaScript for loop
for() command (info). All other left things you will understand after getting the code, I can’t explain all in writing. For creating this you have to create 3 files. First for HTML, second of CSS and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>

<!—Code By Webdevtrick ( https://webdevtrick.com )—>

<html lang=«en» >

<head>

  <meta charset=«UTF-8»>

  <title>Counting Error 404 | Webdevtrick.com</title>

  <link rel=‘stylesheet’ href=‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’>

  <link href=‘https://fonts.googleapis.com/css?family=Anton|Passion+One|PT+Sans+Caption’ rel=‘stylesheet’ type=‘text/css’>

  <link rel=«stylesheet» href=«./style.css»>

</head>

<body>

            <div class=«error»>

                <div class=«container-floud»>

                    <div class=«col-xs-12 ground-color text-center»>

                        <div class=«errorPage»>

                            <div class=«clip»><div class=«shadow»><span class=«digit numberThree»></span></div></div>

                            <div class=«clip»><div class=«shadow»><span class=«digit numberTwo»></span></div></div>

                            <div class=«clip»><div class=«shadow»><span class=«digit numberOne»></span></div></div>

                        </div>

                        <h2>Sorry! Page not found</h2>

                    </div>

                </div>

            </div>

<script  src=«function.js»></script>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

/* Code By Webdevtrick ( https://webdevtrick.com ) */

*

{

  font-family: ‘PT Sans Caption’, sans-serif, ‘arial’, ‘Times New Roman’;

}

    .error .clip .shadow {

        height: 180px;

    }

    .error .clip:nth-of-type(2) .shadow {

        width: 130px;

    }

    .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {

        width: 250px;

    }

    .error .digit {

        width: 150px;  

        height: 150px;

        line-height: 150px;

        font-size: 120px;

        font-weight: bold;

    }

    .error h2  {

        font-size: 32px;

    }

    .error .errorPage {

        margin-top: 10%;

        position: relative;

        height: 250px;

        padding-top: 40px;

    }

    .error .errorPage .clip {

        display: inline-block;

        transform: skew(-45deg);

    }

    .error .clip .shadow {

        overflow: hidden;

    }

    .error .clip:nth-of-type(2) .shadow {

        overflow: hidden;

        position: relative;

        box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);

    }

    .error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after {

        content: «»;

        position: absolute;

        right: -8px;

        bottom: 0px;

        z-index: 9999;

        height: 100%;

        width: 10px;

        background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);

        border-radius: 50%;

    }

    .error .clip:nth-of-type(3) .shadow:after  {

        left: -8px;

    }

    .error .digit {

        position: relative;

        top: 8%;

        color: white;

        background: #ff3f3f;

        border-radius: 50%;

        display: inline-block;

        transform: skew(45deg);

    }

    .error .clip:nth-of-type(2) .digit {

        left: -10%;

    }

    .error .clip:nth-of-type(1) .digit {

        right: -20%;

    }

    .error .clip:nth-of-type(3) .digit {

        left: -20%;

    }    

    .error h2 {

        color: #A2A2A2;

        font-weight: bold;

        padding-bottom: 20px;

    }

@media(max-width: 767px) {

.error .clip .shadow {

                height: 100px;  

            }

.error .clip:nth-of-type(2) .shadow {

                width: 80px;

            }

.error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow   {

                width: 100px;

            }

.error .digit {

                width: 80px;  

                height: 80px;  

                line-height: 80px;

                font-size: 52px;

            }

  .error h2  {

                font-size: 24px;

            }

  .error .errorPage

  {

    height: 150px;

  }

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

// Code By Webdevtrick ( https://webdevtrick.com ) */

function randomNum()

        {

            «use strict»;

            return Math.floor(Math.random() * 9)+1;

        }

            var loop1,loop2,loop3,time=30, i=0, number, selector3 = document.querySelector(‘.numberThree’), selector2 = document.querySelector(‘.numberTwo’),

                selector1 = document.querySelector(‘.numberOne’);

            loop3 = setInterval(function()

            {

              «use strict»;

                if(i > 40)

                {

                    clearInterval(loop3);

                    selector3.textContent = 4;

                }else

                {

                    selector3.textContent = randomNum();

                    i++;

                }

            }, time);

            loop2 = setInterval(function()

            {

              «use strict»;

                if(i > 80)

                {

                    clearInterval(loop2);

                    selector2.textContent = 0;

                }else

                {

                    selector2.textContent = randomNum();

                    i++;

                }

            }, time);

            loop1 = setInterval(function()

            {

              «use strict»;

                if(i > 100)

                {

                    clearInterval(loop1);

                    selector1.textContent = 4;

                }else

                {

                    selector1.textContent = randomNum();

                    i++;

                }

            }, time);

That’s It. Now you have successfully created Custom Error 404 Page With Counting Numbers Using CSS Bootstrap. If you have any doubt or question then comment down below.

Источник

Понравилась статья? Поделить с друзьями:
  • Bootstrap error message css
  • Bootstrap error field
  • Bootstrap datepicker format error
  • Bootmgr отсутствует как исправить
  • Bootmgr is missing как исправить через командную строку