Bootstrap 3.0 Button in Navbar
Wrap a <p class="navbar-btn">
around the <a class="btn">
:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav">
<li>
<p class="navbar-btn">
<a href="#" class="btn btn-default">I'm a link button!</a>
</p>
</li>
</ul>
</div>
</nav>
JSFiddle: http://jsfiddle.net/lachlan/398kj/
Screenshot:
Now, bootstrap 3 has buttons in the navbar like this:
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
It uses navbar-btn
so it knows it's in the navbar.
If you want it to work, do this:
<li>
<form action="#">
<button class="btn btn-default navbar-btn">Link</button>
</form>
</li>
This way, it still acts like an anchor tag. Just change #
for the value you actually want it to go to.
So for this instance:
<li>
<form action="<?php echo BASE_PATH; ?>register.php">
<button class="btn btn-default navbar-btn">Link</button>
</form>
</li>
With bootstrap 3, it is still possible to have a <a>
link rendered as a button, but you have to include them into a <form>
. Also, the <a>
should include the navbar-btn
class.
<li>
<form>
<a href="#" class="btn btn-primary btn-sm navbar-btn">
register
</a>
</form>
</li>