O'Reilly logo

Twitter Bootstrap Web Development How-To by David Cochran

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

Customizing the navbar (Must know)

Twitter Bootstrap's main navigation is organized in the navbar. In this recipe, we'll begin our first steps in customizing the navbar by creating links to our new pages. For those of you experienced with HTML, this will not be difficult, but we can begin noting interesting features of the navbar along the way!

Getting ready

  1. Open index.html in your editor.
  2. Update the document title tag to read <title>Home | My Bootstrap Site</title>.
  3. Scroll down just below the opening body tag (line 35, approximately) where you'll find the markup for the navbar, which begins with the following tag:
    <div class="navbar navbar-fixed-top">

You're there!

Take a moment to scan through approximately the next 18 lines of code, and you'll see ...

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