Dynamic bootstrap tabs using visualforce not working

Question

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>
    </li>
</apex:outputPanel>
<apex:outputPanel rendered=#condition 2#>
    <li  style="display: none;"><a data-toggle="tab" href="#MyTab2" class="active">My Tab 2</a>
    </li>
</apex:outputPanel>
</ul>

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.

Answer 1

@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).

Answer 2

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>