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

Adding drop-down lists (Should know)

While we're working on the navbar we should add a drop-down list. As drop-down functionality draws upon the same Bootstrap JavaScript plugins we connected in the previous recipe, everything is in place to make it work. We just need to add the markup.

Getting ready

  1. Open index.html in your editor.
  2. Scroll down to the <div class="navbar …"> just after the opening <body> tag.

We're ready to start to work.

How to do it…

  1. Within the div class="navbar …", find div class="nav-collapse". This is the region of the navbar which collapses when the viewport width is narrower than 980 px.
  2. Within this, find the unordered list ul class="nav". This is where we created our custom links to our site pages.
  3. We're going to create a new unordered ...

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