Twitter Bootstrap 101: Tabs and Pills
videos

Twitter Bootstrap 101: Tabs and Pills

on Apr 5th 2012 with 15 comments
Tutorial Details
  • Topic: Twitter Bootstrap
  • Difficulty: Beginner
  • Screencast duration: 12 mins
Download Source Files
Demo View It Online
This entry is part 5 of 8 in the series Twitter Bootstrap 101

Twitter Bootstrap 101

Twitter Bootstrap 2.0 makes it easy to set up tabs, enabling your users to quickly switch between panes of content. On top of an excellent JavaScript plugin, the framework provides a number of options for style and layout which are well built and easy to implement. In the following two short videos, I’ll give you a brief introduction.

Be sure to grab the exercise files, since I’ll reference them in the videos, and you’ll find helpful resources and examples to speed you on your way.

Tabs and Pills

After quickly surveying Bootstrap’s documentation on tabs and pills, let me show you some applied examples in our sample files.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Tabs and Pills Playground

Here we’ll use the Tabs & Pills Playground file I’ve provided, and we’ll experiment with alternate layouts and styles together.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Links and Downloads

That’s it! As you work with Tabs, Pills, and other components, don’t forget to return and consult Twitter Bootstrap’s own excellent documentation. You may even want to join Twitter Bootstrap’s Google group, to hang out and learn from other developers as they use the framework.

Have fun!

Series Navigation<< Twitter Bootstrap 101: The NavbarTwitter Bootstrap 101: The Carousel >>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have designed and manage a number of websites, including DeclaringAmerica.com, OKWUeagle.com, and aLittleCode.com.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.kieru.com Rob

    I decided to employ Bootstrap on a project recently and was so thrilled to see support for things like tabs and pills… but then I saw that there really isn’t AJAX support for them built into Bootstrap (or I missed it). That sort of soured the deal for me and ultimately I chose to use jQuery Tools for a lot of things.

    Bootstrap is still very good mind; but I think the lack of built-in AJAX support is a bit of an oversight.

  • http://www.veb4design.com Nima

    @Rob,
    You can always combine the two :
    http://addyosmani.github.com/jquery-ui-bootstrap/

    P.s : great article!
    Nima.

  • supporf

    thank you very mutch
    see you soon in the next tuto

  • Pingback: Twitter Bootstrap 101: Tabs and Pills | Shadowtek Hosting and Design Solutions

  • Pingback: Website - Templates - Tools - Bootsrap | Pearltrees

  • http://bitly.com/powwebcom Mia Lazar

    Tabs can be real pain for every designer, this looks great. Thank you for your time and for complete downloadable project.

  • http://think360studio.com/ Think360studio

    Its really difficult to enable the tabs. But now with Twitter Bootstrap 2.0 its easy to enable the Tabs. Now i can handle my tabs easily. Infect it saves a lot of time. Thanks David for giving all the details.

  • sreejith

    Great article..!!!

    Thank you so much.Its really helpful….

  • http://www.fruiapps.com James Anderson

    Lovely stuff!! btw here is another great tutorial, it covers building stuff from concept to launch, through this small tutorial you can get your hands on and dirty using twitter bootstrap, covers most of the UI elements etc. give it a look: http://blog.fruiapps.com/2012/03/Creating-a-Portfolio-site-with-Twitter-Bootstrap

  • Mike

    Hello,

    Nice tutorials, thanks.

    I have one question though, can the tabs be set up so it woks with the back button?

    Thanks again and keep them coming.

    Mike

  • http://www.PintarKomputer.net Kade

    Nice tuto, i learn much from you…

  • Dave

    Hi David,

    Thanks for this series.

    I have been following along, and your explanations and examples are a great addition to the project documentation.

    Looking forward to more ‘play’!

    An Aside: Your “Alternate CSS Option” of creating a custom style.css, and using @import to pull the other sheets from it is shown to slow down a page load when compared to linking to all of the individual sheets with individual links. (http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)
    Just thought I’d toss that in since the philosophy behind Bootstrap is promoting ‘best practice’.

    Best Regards,
    Dave

    • http://alittlecode.com David Cochran
      Author

      Dave,
      Excellent point. Because of this, it may be best to provide an additional stylesheet link in the markup. After bootstrap-responsive, I’ve begun adding a link to my own custom.css file.

  • http://www.salas.com Pito Salas

    Great tutorial!

    I am trying to ‘remember’ tabs from one visit to another. I am experimenting with putting the current tab in a parameter but I am not getting it to work nor do I like my solution. Can you suggest a best practice for this? (I am working in RoR) Thanks!!

  • http://www.franboud.com Francis Boudreau

    Thanks for this series of videos about Twitter Bootstrap.
    I never used it in my projects, but I’m pretty sure that I will now!

  • http://www.facebook.com/sottek Mark Sottek

    Dude. Thanks for sharing this code. You save me a lot of time. Whats the best way to support this site?

    Shout out from New Orleans

    Mark

  • Pingback: Welcome 0li.org!

  • Boven

    Is it possible to link from an external page to a specific tab?