FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Finishing Touches

Let’s add a nice minimalist footer and a background image to our site to finish off the homepage.

3.6 Finishing Touches

Welcome back to power up your portfolio with Bootstrap. I'm your instructor, Cory Simmons. In the last lesson, we learned how to use the JavaScript isotope plugin to add a filterable portfolio to our homepage. But it still feels a bit incomplete and that's because we're missing the cornerstone of any great site, a footer. But this won't be just any footer. This footer's going to have some pretty sweet boocap, bootstrap icons, or Glyphicons as they're called. So navigate to, and click on components, and you'll immediately see a huge list of these beautiful icons. Scroll down below them to see how they're used. First we declare an element, in this case, span. And give it the class of glyphicon, and glyphicon-, whatever glyph you want to use. Again, let's simply copy the code from the docs instead of typing it all out. All we'll need somewhere to put these. So create a container fluid div, and we'll also give it the class of site footer. So we can apply some custom styling to it. As with all of our Bootstrap grid elements, we'll need to put a row inside of this container, and a column inside of that row. So we'll just make this column a col-md-12. Inside of that column, let's create a paragraph, and paste our glyphicon in there. But we don't want a search icon, we want a phone icon. Now write your phone number next to it, save, and refresh. Great, our icon is working. Now, copy and paste that paragraph, and we'll make this icon an envelope, and next to it we'll put our email address. Let's push those words off those icons a little bit with some CSS. So we'll say site-footer span, margin right, .5 ems, and we'll push our footer off the bottom of the page with side-footer, large in bottom 3 rims. Easy enough, huh? Good. Save your page, refresh it, and expand, cont, and extract your view port. Everything should look and feel good and we're done with the home page. In this lesson we finished our homepage design and learned how to use glyphicons in our project. In the next lesson we get to work on our blog page.

Back to the top