Twitter Bootstrap nav nav-tabs don't change on click

Question

I like how the nav-tabs looks so I want to use it. This is how the web application looks right now:

Unfortunately, if I click on other tab (for example "Buscar alojamiento"), the active tab doesn't change. This is my code:

<ul class="nav nav-tabs">

    <li>        
        <g:link controller="usuario" action="show">         
            <g:message code="nav.usuario.show" default="Datos del usuario" />           
        </g:link>       
    </li>   

    <li class="active">
        <a href="${createLink(uri: '/')}">
            <g:message code="nav.home" default="Página de inicio" />
        </a>
    </li>

    <li>        
        <g:link controller="alojamiento" action="show">         
            <g:message code="nav.alojamiento.show" default="Buscar alojamiento" />          
        </g:link>       
    </li>   

</ul>

I also try removing class="active". No tab is active ever doing that.

Solution

You would need Tabbable Nav to toggle between the contents of each tab.

Comments

[chelder]

I put my code between <div class="tabbable">. Nothing changed.

[dmahapatro]

Follow the example shown in bootstrap page or follow what Sergio has stated, both mean the same thing. @chelder