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

Using tabs for switching content (Should know)

We've been getting familiar with implementing Bootstrap's JavaScript behaviors. Let's keep it going by adding a tabbed content switcher, as follows:

Using tabs for switching content (Should know)

These are great for allowing users to switch briskly between items within one bounded content area. Let's add one of these to our Products page!

How to do it…

In the following steps, we'll first prepare our content and then wrap it in the appropriate tag structure to present it in a tabbed form. First let's add the content.

  1. Open products.html in your browser. Beneath the table, we're going to add a new row with a tabbed panel Options. To speed our progress, ...

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