Bootstrap navbar JSF <h:commandLink> styling does not work - css

Question

I am using a navbar theme from Bootstrap. The navbar uses <a> to navigate to other pages. But i want to navigate by actions so that i can manage my views in the faces-config.xml. The navigation works already with the <h:commandLink>
But now the Problem: <h:commandLink> can only be used into <h:form> so everything will be renderd to a <form> and because of this all my CSS from bootstrap does not work anymore.
In my example the <a> are styled by CSS while the <h:commandLink> is not styled and out of position.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/WebEng_P07/faces/Home.xhtml">MyFacebook</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Posts</li>
<li>Login</li>
<li>Registrierung</li>
<li>
<h:form![enter image description here][1]>
<h:commandLink value="Logout" action="#{loginBean.logout}" rendered="#{loginBean.loggedIn}"></h:commandLink>
</h:form>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

Answer 1

The problem why Bootstrap's styles don't work is that Bootstrap uses following selectors for example for <a/> in the navbar.
.navbar-default .navbar-nav>li>a {
color: #777;
/* other styles */
}
In order to make it work you should create your custom.css and override bootstrap's css like this:
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>form>a, {
color: #777;
/* other styles */
}
Also there is easier way: wrap your div with class .navbar by <h:form>.
And the problem with selectors will be solved.
<!-- Fixed navbar -->
<h:form>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/WebEng_P07/faces/Home.xhtml">MyFacebook</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Posts</li>
<li>Login</li>
<li>Registrierung</li>
<li>
<h:commandLink value="Logout" action="#{loginBean.logout}" rendered="# {loginBean.loggedIn}">
</h:commandLink>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</h:form>