I am looking to create tabs in my visualforce page using Bootstrap. These tabs will be rendered conditionally. The thing is, I am not getting Bootstrap tab switch/styling applied properly because of the <apex:outputPanel> I am using between the <ul> and <li> tags, to render tabs conditionally.

Brief of what I am trying:

<ul class="nav nav-tabs" >
<apex:outputPanel rendered=#condition 1#>
    <li class="active" style="display: inline;"><a data-toggle="tab" href="#MyTab1" class="active">My Tab 1</a>
<apex:outputPanel rendered=#condition 2#>
    <li  style="display: none;"><a data-toggle="tab" href="#MyTab2" class="active">My Tab 2</a>

I even tried <apex:tabPanel> and <apex:tab> , but not getting the desired result. At least if I can apply styles in <apex:tabPanel> with that of Bootstrap, it'll work.

2 Answers 2


@Rao's answer is good. Another approach is:

<apex:outputPanel layout="none" rendered=#condition 1#>

The layout="none" part won't output any HTML (div or span).


Unless you have a block of tabs that you are trying to conditionally render, you do not need the outputpanel. Remove the Outputpanel and apply the condition to the styling on the li

<li class="active" style="{!IF(condition1,'display: inline;','display: none;')}"><a data-toggle="tab" href="#MyTab1" class="active">My Tab 1</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.