Make a sticky div in a bootstrap grid

Question

I'm looking for a way to make a div sticky to the bottom, like a footer, but inside a bootstrap grid, so not over the whole width.

Bootstrap has an example of a sticky footer, I tried to tweak it to make it work in my case but couldn't.

This is another approach, but also assumes your sticky div is not nested inside another div.

Below is my code, I need to make .app-footer sticky to the bottom over the width of it's parent div.

<div class="row main">
  <div class="col-xs-2 col-md-4 col-lg-5">...</div>

  <div class="col-xs-8 col-md-4 col-lg-2">
    <div class="app"></div>
    <div class="app-footer"></div>
  </div>

  <div class="col-xs-2 col-md-4 col-lg-5">...</div>
</div>

Edit: the CSS I've tried but doesn't work:

html,
body {
  height: 100%;
}

/* Wrapper for page content to push down footer */
.app {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

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

Edit: Ok, got it. The solution seems to be to add {position: relative; height: 100%} to ALL parent divs. In my case I had the grid wrapped in <div class="row">, when I added it there too it worked.

You want it sticky to the bottom of the window or to the bottom of the parent element? — bmcculley, Feb 25 '16 at 05:11

score 1 · Answer 1 · answered Feb 25 '16 at 05:07

if you want to make the nested child div positioned to the bottom of the parent div:

add {position:relative} to the css of the the parent div; add {position:absolute;bottom:0} to the css of the the child div;

the nested div should be the same width as the parent (taknig into account the padding and margins), but you could force it to be by adding width:100% to the child div's css

score -1 · Answer 2 · edited Feb 25 '16 at 15:51

-1

You could try this in your CSS:

.app-footer{
  position: absoute;
  bottom: 0px
  width: 100%;
  height: 80px;
  background-color: red;
}

edited Feb 25 '16 at 15:51

Michał Perłakowski

88,409
26
156
177

answered Feb 25 '16 at 05:06

Neftali Aguilar

21
5

score -1 · Answer 3 · answered Feb 25 '16 at 05:14

-1

Use this css to make your app-footer div sticky:

.app-footer {
  height: 60px;
  background-color: #f5f5f5;
  position: fixed;
  bottom:0px;
  left:0px;
}

answered Feb 25 '16 at 05:14

Neeraj Kumar

506
1
8
19

Make a sticky div in a bootstrap grid

3 Answers3