Spacing between Bootstrap buttons

Question

How do I make sure that there is spacing between the buttons when i use the following piece of code

<div class="container">
   <div class="jumbotron">
    <button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
    <br><br>         
    <span ng-repeat="genre in genres"> 
        <button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>            
    </span>            

</div>

Answer 1

'btn-toolbar' does the trick in one fell swoop. No manual css'ing required

<div class="btn-toolbar">
    <button id="button1" class="btn btn-primary">Button 1</button>
    <button id="button2" class="btn btn-primary">Button 2</button>
    <button id="button3" class="btn btn-primary">Button 3</button>
</div>

Answer 2

You can use Bootstrap spacing, docs here --> https://getbootstrap.com/docs/4.0/utilities/spacing/

This example uses the class 'mr-2' to add right margins to buttons

<button id="button1" class="btn btn-primary mr-2">Button 1</button>
<button id="button2" class="btn btn-primary mr-2">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>