<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div id="o"><div id="m"><div id="i"> <h1><span class="errorText" data-delay="1000" data-errmsg='["Error 404","Page not found.","Sincere apologies...","nop, aint here."]'></span></h1> <h2>The requested document has not been found on this server.</h2> </div></div></div> </div>

html,body { padding: 1em 2em; font-size: 18px; background: #222; color: #FF9800; } h1,h2 { font-weight: 200; margin: 0.4em 0; text-align: center; } h1{ font-size: 3.5em; } h2{ color: #888; font-size: 2em; } #o{ display: table; position: absolute; height: 100%; width: 100%; } #m{ display: table-cell; vertical-align: middle; } #i{ margin-left: auto; margin-right: auto; }

var ErrTxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; ErrTxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('errorText'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-errmsg'); var period = elements[i].getAttribute('data-delay'); if (toRotate) { new ErrTxtRotate(elements[i], JSON.parse(toRotate), period); } } var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".errorText > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); };