CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
Utkarsh Saraf
Utkarsh Saraf

Reputation: 495

Whitespace between buttons with AngularJS Bootstrap module

I am trying to make multiple buttons to look like menu in following code

<div class="btn-group" uib-dropdown>
      <button id="" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Inline Dropdown
      </button>
      <ul uib-dropdown-menu>
        <li role=""><a href="#">Action</a></li>
        <li role=""><a href="#">Another action</a></li>
      </ul>
    </div>
    <div class="btn-group" uib-dropdown>
      <button id="" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Inline Dropdown
      </button>
      <ul uib-dropdown-menu>
        <li role=""><a href="#">Action</a></li>
        <li role=""><a href="#">Another action</a></li>
      </ul>
    </div>

Everything is working fine but there is small whitespace between two divs.How can i resolve the same.

The plunker for the same is here : https://plnkr.co/edit/W8d74Qpqm4p4oLJnNXgT?p=preview

Upvotes: 1

Views: 88

Answers (2)

haMzox
haMzox

Reputation: 2109

On the second div use inline styling or edit the original class: 

style="margin-left:-4px"

OR

.btn-group {
display:block;
}

Upvotes: 0

Ricardo Enrique Ibarra Cabrera
Ricardo Enrique Ibarra Cabrera

Reputation: 386

You may want to use a navbar element instead o several dropdowns. If you want to remove the whitespace try this:

.btn-group {
   display:block;
}

Upvotes: 2

Related Questions