html - Bootstrap sticky footer with vertically centred content -
trying modify bootstrap's sticky footer example http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html have vertically centred content, still fail that.
the full code below. i'm trying vertically align part between "begin page content" , "end page content" comments.
would appreciate help.
<html lang="en"> <head> <meta charset="utf-8"> <title>sticky footer · twitter bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- css --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> /* sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* html , body elements cannot have padding or margin. */ } /* wrapper page content push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* negative indent footer it's height */ margin: 0 auto -60px; } /* set fixed height of footer here */ #push, #footer { height: 60px; } #footer { background-color: #f5f5f5; } /* lastly, apply responsive css fixes necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* custom page css -------------------------------------------------- */ /* not required template or sticky footer method. */ #wrap > .container { padding-top: 60px; } .container .credit { margin: 20px 0; } code { font-size: 80%; } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- html5 shim, ie6-8 support of html5 elements --> <!--[if lt ie 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- fav , touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="../assets/ico/favicon.png"> </head> <body> <!-- part 1: wrap page content here --> <div id="wrap"> <!-- fixed navbar --> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li class="nav-header">nav header</li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <!-- begin page content --> <div class="container"> <div class="page-header"> <h1>header</h1> </div> <p class="lead">content</p> </div> <!-- end page content --> <div id="push"></div> </div> <div id="footer"> <div class="container"> <p class="muted credit">example courtesy <a href="http://martinbean.co.uk">martin bean</a> , <a href="http://ryanfait.com/sticky-footer/">ryan fait</a>.</p> </div> </div> </body>
in bootstrap 3 - sticky footer vertical , horizontal content.if don't need horizontal center remove class text-center.
<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <div class="col-sm-12 text-center navbar-text"> content.... </div> </div> </nav>
Comments
Post a Comment