daydreamer daydreamer - 1 month ago 8
CSS Question

How can I make space between two buttons in same div?

What is the best way to horizontally space Bootstrap buttons?

At the moment the buttons are touching:

<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i class="icon-in-button"></i>
Add to list
<span class="caret"/>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">here</a>
</li>
<li>
<a href="#">new</a>
</li>
</ul>
<button class="btn btn-info">
<i class="icon-in-button"></i>
more
</button>
</div>


Two Bootstrap buttons

jsfiddle showing the problem: http://jsfiddle.net/hhimanshu/sYLRq/4/

Answer

Put them inside btn-toolbar or some other container, not btn-group. btn-group joins them together. More info on Bootstrap documentation.

Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3.

Comments