Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 842
user1028866 Avatar asked Oct 03 '12 05:10

user1028866


3 Answers

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.

like image 114
Sara Avatar answered Nov 18 '22 00:11

Sara


You may check this Fiddle

It's just wrapping button in anchor tags..

like image 33
000 Avatar answered Nov 18 '22 02:11

000


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>
like image 1
AT_ Avatar answered Nov 18 '22 01:11

AT_