0

Updated: Added Bootstrap3 code below.

Starting with the default bootstrap example that contains sticky footer. I tried a few CSS methods found in SO to center a DIV to middle of page, both vertically and horizontally.

However, each of these methods changes the sticky footer since it doesn't like html, body { height: 100% } tags.

Am curious if someone have found solution. 

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.jumbotron {
  width: 400px;
  float: none;
  margin-top: 100px;
  }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <center>
      <div class="jumbotron">
        Requires CSS coding to center it, height is fluid.
     </div>
     </center>
    </div><!-- /jumbotron -->

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>
Community
  • 1
  • 1
Alvin K.
  • 4,329
  • 20
  • 25
  • 1
    Could you include some more code please? The best I could offer is create a new div and do something like Height:25% Width:25% Margin:auto. – Xander Luciano Sep 09 '15 at 17:59

2 Answers2

4

You could add a fixed positioned div with 100% width and height as a parent of the vertical and horizontal centered div to leave the document flow and then use the display: table trick to actually align your child div vertically.

But that will lead to the situation where the height of the centered div will no longer push down the footer.

Take a look at the following example. 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.fixed-container {
    display: table;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

center {
    display: table-cell;
    vertical-align: middle;
}

.jumbotron {
    width: 400px;
    float: none;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<!-- Begin page content -->
<!-- Begin page content -->
<div class="container fixed-container">
    <center>
        <div class="jumbotron">
            Requires CSS coding to center it, height is fluid.
        </div>
    </center>
</div><!-- /jumbotron -->

<footer class="footer">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</footer>

To make this a bit more flexible i would suggest to add a max-height with overflow-y: auto to the centered div like in the following example.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.fixed-container {
  display: table;
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

center {
  display: table-cell;
  vertical-align: middle;
}

.jumbotron {
  width: 720px;
  max-height: 300px;
  overflow-y: auto
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<!-- Begin page content -->
<!-- Begin page content -->
<div class="container fixed-container">
  <center>
    <div class="jumbotron">
      Requires CSS coding to center it, height is fluid.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eius minima nihil voluptatem earum, itaque maxime, accusamus sed doloribus culpa harum, minus sapiente. Vel voluptas molestias officia, quod dolorem natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla consectetur quo libero ducimus, quod labore nesciunt veniam quisquam corporis. Molestiae ea quaerat itaque temporibus earum. Similique tempora officiis nobis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro deserunt, autem ut asperiores fugiat eaque aperiam aliquam dicta delectus repellendus blanditiis odit nobis, unde sunt accusamus nesciunt temporibus esse labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit aliquid exercitationem nesciunt rerum cumque, dolorem voluptatibus sed culpa harum inventore. Reiciendis distinctio dolorem voluptatem suscipit ut molestiae perferendis id illum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consequuntur cupiditate, culpa consequatur excepturi, tenetur doloribus libero reprehenderit modi laboriosam quo eligendi quaerat fugiat incidunt repudiandae cumque unde ipsam officiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus modi animi porro nisi officiis explicabo doloremque ipsum saepe non fugit. Dolor molestias deleniti animi mollitia consequuntur cumque vitae dicta accusamus.
    </div>
  </center>
</div><!-- /jumbotron -->

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

If you would want to keep the overflow of the document to be able to scroll whenever the content is bigger than the actual height, you could use a different approach, by adding the footer as a fixed positioned element to a container which will center the .jumbotron by setting it's position to absolute and adding padding, but this will still not push the footer down.

Here is what this would look like.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

html, body {
  height: 100%;
}

.holder {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 5% 0;
}

center {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 25%;
  margin: -7.5% 0 0 -25%;
  padding: 10% 0;
}

.jumbotron {
  max-width: 520px;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<!-- Begin page content -->
<!-- Begin page content -->
<div class="holder">
  <center>
    <div class="jumbotron">
      Requires CSS coding to center it, height is fluid.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eius minima nihil voluptatem earum, itaque maxime, accusamus sed doloribus culpa harum, minus sapiente. Vel voluptas molestias officia, quod dolorem natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla consectetur quo libero ducimus, quod labore nesciunt veniam quisquam corporis. Molestiae ea quaerat itaque temporibus earum. Similique tempora officiis nobis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro deserunt, autem ut asperiores fugiat eaque aperiam aliquam dicta delectus repellendus blanditiis odit nobis, unde sunt accusamus nesciunt temporibus esse labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit aliquid exercitationem nesciunt rerum cumque, dolorem voluptatibus sed culpa harum inventore. Reiciendis distinctio dolorem voluptatem suscipit ut molestiae perferendis id illum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consequuntur cupiditate, culpa consequatur excepturi, tenetur doloribus libero reprehenderit modi laboriosam quo eligendi quaerat fugiat incidunt repudiandae cumque unde ipsam officiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus modi animi porro nisi officiis explicabo doloremque ipsum saepe non fugit. Dolor molestias deleniti animi mollitia consequuntur cumque vitae dicta accusamus.            Requires CSS coding to center it, height is fluid.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eius minima nihil voluptatem earum, itaque maxime, accusamus sed doloribus culpa harum, minus sapiente. Vel voluptas molestias officia, quod dolorem natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla consectetur quo libero ducimus, quod labore nesciunt veniam quisquam corporis. Molestiae ea quaerat itaque temporibus earum. Similique tempora officiis nobis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro deserunt, autem ut asperiores fugiat eaque aperiam aliquam dicta delectus repellendus blanditiis odit nobis, unde sunt accusamus nesciunt temporibus esse labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </center>

  <footer class="footer">
    <div class="container">
      <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </footer>
</div><!-- /jumbotron -->

The last thing i can think of is to add a bit of flex to the bootstrap sticky footer template, which will ensure that the footer will get pushed down while the content of the centered div is getting too tall. That way you can keep the layout as is, but make sure to checkout flexbox browser support.

Here is how that goes.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.center {
  display: flex;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
  margin: 0 0 -60px;
  padding: 60px 0 70px;
}

.flex-item {
  flex: 1;
  max-width: 400px;

}

.jumbotron {
  margin-bottom: 0;
  padding: 15px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<!-- Begin page content -->
<div class="container">
  <div class="center">
    <div class="jumbotron flex-item">
      Requires CSS coding to center it, height is fluid.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eius minima nihil voluptatem earum, itaque maxime, accusamus sed doloribus culpa harum, minus sapiente. Vel voluptas molestias officia, quod dolorem natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla consectetur quo libero ducimus, quod labore nesciunt veniam quisquam corporis. Molestiae ea quaerat itaque temporibus earum. Similique tempora officiis nobis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro deserunt, autem ut asperiores fugiat eaque aperiam aliquam dicta delectus repellendus blanditiis odit nobis, unde sunt accusamus nesciunt temporibus esse labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Similique tempora officiis nobis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro deserunt, autem ut asperiores fugiat eaque aperiam aliquam dicta delectus repellendus blanditiis odit nobis, unde sunt accusamus nesciunt temporibus esse labore. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div><!-- /jumbotron -->

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>
DavidDomain
  • 14,976
  • 4
  • 42
  • 50
0

Just center the text in your footer:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
    text-align: center;
}

And add some padding to your <p> tag:

.text-muted {
    padding-top: 20px;
}
pine_cone
  • 21
  • 4
  • Footer remains at the bottom, it is the jumbotron DIV that needs to be centered height-wise (height is fluid). – Alvin K. Sep 09 '15 at 19:53