D4mations.com

Bootstrap 3 Tutorials – #3 – Sticky Footer That Stays In The Browser Viewport

[ad_1]
https://i.ytimg.com/vi/KxmLNctBi10/hqdefault.jpg



In this Twitter Bootstrap tutorial, we will be creating a sticky footer bar which will scroll with the page so that it is always at the bottom of the browser viewport. We can accomplish this by using a white navbar and setting it to be fixed to the bottom of the page.

Code: http://www.coders-guide.com/watch?v=53

Website: http://coders-guide.com
Twitter: http://twitter.com/coders_guide
Facebook: http://goo.gl/DmWtB
Google+: http://goo.gl/cGyk8
Donate: http://goo.gl/q3MPw

Original source

d4mer

,
, , , , , , , , , , , , , , , , ,

39 responses to “Bootstrap 3 Tutorials – #3 – Sticky Footer That Stays In The Browser Viewport”

  12. Please help!

    i have my navbar menu fixed and sticky on top..
    and then i put a container next to it..
    when ever i scroll it down the container blocks my navbar menu..

    what should i do to avoid the container blocking my menu upon scrolling..

    TIA

  19. really good tutorial thank you. what happened to your web site coders-guide? clicked the first link and it was broken. also noticed the https gave a cert error? anyway thanks for the great tutorial.

  22. grrr… general moan at bootstrap – you should not be using the "danger" button because it's the right colour, you should be using the danger button because there is in fact danger. Semantic markup. If buttons need colour classes then they need colour classes. All .btn-danger is doing in the css is setting background-color. A subrule can do that

  29. I need a sticky input box in one of the column of the page, not like a navbar that expands throughout the page.  Is this something we can implement using navbar?  Or are there any other ways of doing it?

  31. 'Site build by' and 'subscibe to youtube' are not in place as shown in the tutorial. they are showing at left bottom corner and  right bottom corner of the screen! Pls tell me why.
    <div class = "navbar navbar-default navbar-fixed-bottom">
    <div="container">
    <p class = "navbar-text pull-left" >Site built by Shreedhar</p>
    <a href = "#" class = "navbar-btn btn-info btn pull-right">Contact on Facebook</a>
    </div>
    </div>

  34. For your navbars why aren't you using the "<nav>" tag to begin both the header and footer. The bootsrap docs state that's how it's done and I was just curious as to why you chose to do <div> with class of .navbar

  35. and the third tutorial have you make it, my problem now the footer totally left even code is complete like your video 

    <p class="navbar-text pull left">Site Built Rowes</p>
    <a href="#" class="navbar-btn btn-danger btn pull right">Subscribe on Youtubue</a>

    am i wrong ? anyone tell me 

  36. Your videos are incredibly helpful. However I do have a question: when I view the webpage with this footer on a movile device, the footer covers up part of the content and it is impossible to scroll down. Is there a way to fix this?

    Thanks!

Leave a Reply