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 bootstrap has some classes for this?

I know I can simply do it with:

style='margin-right:5px;'

or write custom class with this property.

I am just wondering if bootstrap has some classes for this?

Here is example.

Problem is with this three buttons:

<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>

Answer 1

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