In the third installment of our Bootstrap 3 tutorial, we show you how to build a fixed footer.
Video Transcript
Hey everybody this is Christopher Gimmer from BootstrapBay.com and welcome to the third installment of our Bootstrap 3 tutorial. Today we’re going to be creating a fixed footer.
The code is going to be very similar to our navbar so we’re going to go:
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"></div>
So the difference is that instead of being navbar-fixed-top it’s navbar-fixed-bottom. Then we go:
<div class="container"></div>
Now if we were just to add a paragraph tag, let’s say copyright 2014 BootstrapBay, when we go to our preview, you’ll see that we got the black footer. The problem is the text isn’t really legible and that it’s floating at the top. One thing we need to add is:
<div class="navbar-text pull-left"></div>
Now if we go back to our preview, the text in the footer is styled properly and it’s vertically centered in the middle of the footer. So that’s it for our tutorial on building a fixed footer.
In our last video I mentioned that we’re going to create social media icons for the footer, but I’m actually going to do that in the next video on installing Font Awesome and adding social media icons to your website. So make sure to subscribe and catch us in the next video.
