15

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

3 Answers 3

38

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.

0
2

You may check this Fiddle

It's just wrapping button in anchor tags..

2
  • That's exactly what I tried and the button shifts down. This is happening in a Wordpress site. Is that a factor? Oct 3, 2012 at 14:53
  • Let me see if I can supply a better example of the problem. Thanks for help so far. Oct 3, 2012 at 15:37
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.