Adding href to one button in btn-toolbar and maintaining alignment

Question

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

Answer 1

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>

Answer 2

You may check this Fiddle

It's just wrapping button in anchor tags..

Answer 3

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.