Tabs display using Visualforce + Bootstrap

Visualforce Apr 22, 2015

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

Resources You Need

  1. Bootstrap css
    <link href="//" rel="stylesheet" />

  2. jQuery
    <script src="//"></script>

  3. Bootstrap Js
    <script src="//"></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><a href="#tab2" data-toggle="tab">tab2</a></li>
    <li><a href="#tab3" data-toggle="tab">tab3</a></li>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
        <p>Tab 1 Content</p>
    <div class="tab-pane fade" id="tab2">
        <p>Tab 2 content</p>
    <div class="tab-pane fade" id="tab3">
        <p>Tab 3 Content</p>

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

Sample Ouptut

Phanindra Mangipudi

Salesforce, Lightning Web Componets, Node.Js, Angular 2+, Bootstrap