I want to add an href to the Contact Sales button in the following code. If I wrap the button in an anchor tag the button moves down out of alignment with the other button (it slides 8px down). I've been looking at Firebug console and can't figure out how to solve this.
<div id="headerbtn" class="span6">
<div class="btn-toolbar pull-right">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle">
Contact Sales
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="icon-user icon-white"></i>
Sign In
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Profile</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Sign Out</a>
</li>
</ul>
</div>
</div>
</div>
I'm new to Bootstrap and would appreciate any help. Thanks
In Bootstrap, anchors with a "btn" class are styled identically to buttons. Therefore, you can actually change the 'Contact Sales' button into an anchor while preserving the button style.
Untested (since jsFiddles don't seem to elicit the problem you're having):
<div id="headerbtn" class="span6">
<div class="btn-toolbar pull-right">
<div class="btn-group">
<a href="#" class="btn btn-primary">
Contact Sales
</a>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="icon-user icon-white"></i>
Sign In
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Profile</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Sign Out</a>
</li>
</ul>
</div>
</div>
</div>
I also removed the dropdown-toggle
class from the anchor, because I'm guessing you don't want it to be both a link and a dropdown toggle.
You may check this Fiddle
It's just wrapping button in anchor tags..
Keep with your code and just wrap with <p>
rather than <div>
:
<p class="text-center">
<a href="office/" class="btn btn-success">Get Started...</a>
</p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With