Bootstrap 3.0 - push element to bottom

Question

I chose Twitter Bootstrap for quick app display layer bulding, recently I have faced problem.

I'm trying to push element to bottom of page container, but keeping it centered. Adding class .push-to-bottom { position: absolute; bottom: 50px } didn't help.

Answer 1

If you know the dimensions of the element you want to center, you can use a margin-left being the negative value of width / 2. Like this jsFiddle example:

.push-to-bottom {
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -50px;
}

#element {
  background-color: #000;
  width: 100px;
  height: 100px;
}

Answer 2

Use position: absolute to get it to the bottom of the page and use the .text-center class (from Bootstrap) along with width: 100% to get it in the middle:

<div class="container">
  <div class="row force-to-bottom text-center">
    <div class="col-xs-12">
            <h1>
            <input class="btn btn-primary" type="submit" value="Save">
        </h1>

    </div>
</div>

.force-to-bottom {
  position:absolute;
  bottom: 5%;
  width: 100%;
}

Clicky here for the fiddle.