In a previous article, Let's use Liferay tabs, I explained how to use Liferay tabs with the taglibs provided by the portal. 

With Liferay 6.2 release and Bootstrap integration the graphics capabilities have increased: so let's see how to display tabs in the left and right vertical side.

The first thing is that the taglib now generate an HTML code compliant with Bootstrap and so we can just play a bit with the CSS classes to obtain the desired output.

We do not dive into the details of the code to write, we've talked about it in the other article; so we'll see only the final code.

Tabs on the left side

<% String currentTab = ParamUtil.getString(renderRequest, "tabs1", "tab1"); %>

<liferay-portlet:renderURL var="changeTabURL" />

<div class="tabbable tabs-left">
    <liferay-ui:tabs
        names="tab1,tab2,tab3"
        url="<%=changeTabURL %>" 
    />

    <div class="tab-content">
        <liferay-util:include
            page='<%= "/html/tab_sample/tabs/" + TextFormatter.format(currentTab, TextFormatter.N)  + ".jsp" %>'
            servletContext="<%= application %>" />
    </div>
</div>

Tabs on the right side

<% String currentTab = ParamUtil.getString(renderRequest, "tabs1", "tab1"); %>

<liferay-portlet:renderURL var="changeTabURL" />

<div class="tabbable tabs-right">
    <liferay-ui:tabs
        names="tab1,tab2,tab3"
        url="<%=changeTabURL %>" 
    />

    <div class="tab-content">
        <liferay-util:include
            page='<%= "/html/tab_sample/tabs/" + TextFormatter.format(currentTab, TextFormatter.N)  + ".jsp" %>'
            servletContext="<%= application %>" />
    </div>
</div>