O'Reilly logo

Bootstrap Site Blueprints Volume II by Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Coding the header and footer

Let's set up the header and footer for our social networking website. It's going to be made up of the regular Bootstrap navbar component, with some new customizations. The main new items will be an icon-based navigation, a search bar, a utility drop-down menu, and some mobile-specific styling.

Updating the header

I'll start out by showing you the code for the entire header, and then we'll dissect the parts that we need to update. Start off by creating a file called _header.ejs, and save it in the /partial directory. Then, insert this code:

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required