Bootstrap sticky footer with vertically centred content

Question

Trying to modify bootstrap's Sticky footer example http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html to have vertically centred content, but still fail to do that.

The full code is below. I'm trying to vertically align the part between "Begin page content" and "End page content" comments.

Would appreciate any help.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sticky footer &middot; 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%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }



      /* Custom page CSS
      -------------------------------------------------- */
      /* Not required for 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, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and 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 all 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> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
  </body>

You need to give us what you have so far so we know where to start. — Keith, Jul 31 '13 at 12:19
I've got pretty much the same thing as here http://getbootstrap.com/2.3.2/examples/sticky-footer-navbar.html The header and the text are different but everything else is pretty much the same. — donnydarko, Jul 31 '13 at 12:30
Go here to look up how to use vertical-align: http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css — Keith, Jul 31 '13 at 12:39

score 9 · Answer 1 · answered Feb 20 '14 at 21:29

9

In Bootstrap 3 - sticky footer with vertical and horizontal content.If you don't need horizontal center remove the class text-center.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <div class="col-sm-12 text-center navbar-text">
        your content....
    </div>
  </div>
</nav>

answered Feb 20 '14 at 21:29

czlatea

1,131
13
20

Ouch. Should have found this from 4 hours ago.. xD – Zeliax Mar 20 '16 at 17:36

score 0 · Answer 2 · answered Jul 31 '13 at 12:23

0

When you set a fixed height then use padding-top to get content centered vertically.

Or you can try to use on your content:

vertical-align: middle;

answered Jul 31 '13 at 12:23

Sergei Beregov

738
7
19

I've tried to apply "vertical-align: middle" to #container and #wrap - it didn't work.Not sure how padding-top could help, static value won't make it automatically align vertically. – donnydarko Jul 31 '13 at 12:27
If you have fixed height then you can set half of weight for padding or use % – Sergei Beregov Jul 31 '13 at 12:29
The height of #container and #wrap is 100%. Tried to add margin-top and padding-top to #container and #wrap but that makes a scrollbar to appear and the page height is always more than the the screen. – donnydarko Jul 31 '13 at 12:39

Bootstrap sticky footer with vertically centred content

2 Answers2