"Sample 404 page"
Bootstrap 3.2.0 Snippet by Tomboasy

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container"> <div class="row"> <div class="col-sm-12"> <div class="jumbotron center"> <h1>Page Not Found <small><font face="Tahoma" color="red">Error 404</font></small></h1> <br /> <p>The page you requested could not be found, either contact your webmaster or try again. Use your browsers <b>Back</b> button to navigate to the page you have prevously come from</p> <p><b>Or you could just press this neat little button:</b></p> <a href="#" class="btn btn-large btn-info"><i class="icon-home icon-white"></i> Take Me Home</a> <br/><small class="text-muted">- OR -</small> <div class="input-group col-md-6 col-md-offset-3"> <input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div> <br /> <div class="thumbnail col-sm-3 center"> <h3>Try This...</h3> <p>write about your error page conent here and give some fool a good load of information or not</p> <div class="hero-unit"> <img src="http://placehold.it/100x100"><!--Why Not Put a Picture To Celebrate Your 404--> <p></p> </div> <a href="#" class="btn btn-danger btn-large"><i class="icon-share icon-white"></i> Take Me There...</a> </div> <div class="thumbnail col-sm-3 center"> <h3>Try This...</h3> <p>write about your error page conent here and give some fool a good load of information or not</p> <div class="hero-unit"> <img src="http://placehold.it/100x100" class="img-circle"><!--Why Not Put a Picture To Celebrate Your 404--> <p></p> </div> <a href="#" class="btn btn-danger btn-large"><i class="icon-share icon-white"></i> Take Me There...</a> </div> <div class="thumbnail col-sm-3 center"> <h3>Try This...</h3> <p>write about your error page conent here and give some fool a good load of information or not</p> <div class="hero-unit"> <img src="http://placehold.it/100x100"><!--Why Not Put a Picture To Celebrate Your 404--> <p></p> </div> <a href="#" class="btn btn-danger btn-large"><i class="icon-share icon-white"></i> Take Me There...</a> </div> <div class="thumbnail col-sm-3 center"> <h3>Try This...</h3> <p>write about your error page conent here and give some fool a good load of information or not</p> <div class="hero-unit"> <img src="http://placehold.it/100x100"><!--Why Not Put a Picture To Celebrate Your 404--> <p></p> </div> <a href="#" class="btn btn-danger btn-large"><i class="icon-share icon-white"></i> Take Me There...</a> </div> <br /> <p></p> <!-- By ConnerT HTML & CSS Enthusiast --> </div> </div> </div>
.center {text-align: center; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto;} body{padding-top:40px; padding-bottom:50px} *{border-radius: 0px!important; -moz-border-radius: 0px!important; -webkit-border-radius: 0px!important} .thumbnail{margin-left:-1px; padding-bottom:30px}

Related: See More


Questions / Comments: