Position-responsive element to the bottom of the screen using CSS, HTML, and Bootstrap

Question

To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen. So I have this code which makes it behave responsively:

<div class="col-sm-12">
    test
</div>

But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.

What kind of element are you talking about exactly? Is it like a footer? — Quiver, Sep 21 '15 at 17:01
possible duplicate of [HTML/CSS positioning "float: bottom"](http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom) — Tushar Khatiwada, Sep 21 '15 at 17:05
possible duplicate of [Twitter Bootstrap 3 Sticky Footer](http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer) — TylerH, Sep 23 '15 at 19:13

score 4 · Answer 1 · answered Sep 21 '15 at 18:55

One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:

<div class="fixed-container">
    <div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->

And you styles could look like:

.fixed-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.

score 3 · Answer 2 · answered Sep 21 '15 at 17:04

3

<div id="my-element" class="col-sm-12">
    test
</div>

#my-element {
    position: fixed;
    bottom: 0;
}

answered Sep 21 '15 at 17:04

Destination Designs

683
1
5
17

Thank you! Worked perfecly for me ^^ – SkyboyKP Sep 21 '15 at 19:08

score 0 · Answer 3 · edited Sep 21 '15 at 19:15

Here is a simple solution to your problem.

Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:

<div class="container-fluid">

Inside this container place your elements/sections including your footer:

<footer class="col-md-12">

Your footer should have the following CSS.

footer {
       position: absolute;
       bottom: 0;
       height: 100px /* Height of your footer */
       width: 100%;
   }

Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.

http://jsfiddle.net/gward90/ehf2wm83/

Position-responsive element to the bottom of the screen using CSS, HTML, and Bootstrap

3 Answers3