Space between buttons with bootstrap class

Question

I have a problem with three buttons on my site. I would like to have some space between those buttons. Is it possible to do this, without using inline styling? Perhaps boot

Answer 1

Try to put them inside btn-toolbar or some other container.

 <div class="btn-toolbar">
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
 </div>

Answer 2

Yes you have to wrap them

<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>

EDITED CODEPEN

Answer 3

<div class="btn-toolbar">
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
    </div>