luckycharm-boy luckycharm-boy - 6 months ago 41
HTML Question

How to acheive navbar-static-bottom class?

There is

navbar-static-top
navbar-fixed-top
and
navbar-fixed-bottom
but
navbar-static-bottom
just doesn't work in Bootstrap. Is there any way to acheive this effect?

Answer

Try this

HTML

<html>
    <body>
        <div class="wrapper">
            <div class="contents">
                <div class="clearfix">
                    <!-- some contents -->
                </div>
            </div>
            <footer>
                <div class="clearfix">
                    <!-- some contents -->
                </div>
            </footer>
        </div>
    </body>
</html>

CSS

html, body {
    background-color: #F3F3F3;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    position: relative;
    min-height: 100%;
}

.contents {
    height: 1500px;
}

footer {
    background-color: rgb(34, 42, 53);
    position: absolute;
    bottom: 0; /* absolutely bottom */
    width: 100%;
}

.clearfix {
    padding: 20px;
}
Comments