[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
39 responses to “Bootstrap 3 Tutorials – #3 – Sticky Footer That Stays In The Browser Viewport”
😀
Awesome tutorial. Exactly what I needed.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Digital Products Creation copyright 2017
</div>
</nav>
this code work well
my footer is not showing
I think these tutorials will fix the problems with my site and help me understand bootstrap.
I LOVE YOU
ty me help very im brasil vlw.
Worked perfectly! Thank you! 🙂
Useful, thanks!
Is it possible to get the footer only on the homepage and then it dissapears when you scroll down? How is that called? And what do i need to do to change that?
Great tutorial, straight to the point, well explained and easy!
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
Noice!!!
Thanks , it is ver helpful, you expalin very clearly….
footer bar is black coloured, why?
Thanks! Great tip!
Thanks for the help!
Best tutorials! Thank you, more on php please….
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.
hey my "dropdown-menu" and "navheadercollapse" are not working/showing even though i copied your codes correctly and DL the bootstrap…. why??????
Great stuff here.
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
you don't show your setup of css. This is not helpful at all
how you add a line bellow the text "Site Built by Neil Rowe" with another text?
Congratulations!
You just earned a Subscriber!.
Thanks for the help. Im just new to bootstrap and I'm a little confused but you helped me thank you very much
Dude! You are a total beast. Thanks so much for all your hard work.
Very, very nice tutorial! One of the best Bootstrap3 tuts I've seen, Thanks.
Nice! Bootstrap rocks!
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?
plus 1
'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>
Umm, i was playing around with the footer and made it 'static-bottom'. It does scroll away with the page but it does not stick the bottom absolutely. It floats up at around 10px, Why?
That's a fixed footer, not a sticky footer.
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
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
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!
Thank You:)
you are a godsend….I've been dabbling around in the boot strap documentation and found bits of it rather confusing before your series of videos
I love you man !!