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

Making it responsive (Should know)

One of the truly exciting things about Twitter Bootstrap is that since version 2.0, its navbar adjusts responsively to small viewports such as tablets and handheld devices. At these narrow widths, the navbar cleverly adjusts to allow users quick access to the main site content, while providing a button which triggers a drop-down panel containing the main navigation items.

Getting ready

If you're using a modern browser, you can see the responsive navbar in action on your computer. With one of the site pages open, drag the window width narrower. You'll see the transformation happen when the viewport shrinks below 980 pixels wide.

Assuming you've been following the above steps, you'll find that the navbar drop-down ...

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