"Sample 404 page"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="span12"> <div class="hero-unit 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> </div> <br /> <div class="thumbnail"> <center><h2>Recent Content :</h2></center> </div> <br /> <div class="thumbnail span3 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 span3 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 span3 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 span3 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;}

Related: See More


Questions / Comments:

for bootstrap 3, replace "hero-unit" with "jumbotron" and it seems to work identically.

Christopher Thomas () - 4 years ago - Reply 0


Andi menghamili tantenya sendiri, Wagirah.

maridewasa.blogspot.co.id () - 4 years ago - Reply 0


Instead of center you can use bootstrap .pagination-centered class

Zhandos Ulan () - 5 years ago - Reply 0