Tabs display using Visualforce + Bootstrap

Phanindra Mangipudi -

This post explains on How to get Tab Display in Visualforce pages using Bootstrap

Resources You Need

  1. Bootstrap css
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

  2. jQuery
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  3. Bootstrap Js
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Please paste in above listed Order for exact behavior.

NOTE: Sometimes you may experience some weird functionalities like events like clicks, hover doesn't respond, Its because you loaded Bootstrap Js prior to jQuery.

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#tab1" data-toggle="tab">Tab 1 active</a>
    </li>
    <li><a href="#tab2" data-toggle="tab">tab2</a></li>
    <li><a href="#tab3" data-toggle="tab">tab3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
        <p>Tab 1 Content</p>
    </div>
    <div class="tab-pane fade" id="tab2">
        <p>Tab 2 content</p>
    </div>
    <div class="tab-pane fade" id="tab3">
        <p>Tab 3 Content</p>
    </div>
</div>

Now Club <apex:...> tags and above HTML tags to achieve tabbed display

Sample Ouptut