No margin-bottom on bootstrap button?

Issue

I’m using button element in a bootstrap template.

I was wondering if it is the normal behavior in bootstrap :

When there is not enough space to show all the buttons on one line, or when the window is resized, some buttons are shown on a 2nd line and it’s ok like that but there is no margin-bottom.

I can add it :

.btn {
    margin-bottom: 5px; 
}

But i find it strange that it is not handled by bootstrap.

Maybe i’m doing something wrong ?

SOURCE : http://jsfiddle.net/Vinyl/zx9oefya/

<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>

Solution

In Bootstrap's buttons.less and button-groups.less there's nothing about margin-top or margin-bottom. Having a margin by default would likely conflict when combining it with other elements (e.g. a form)

I think the best solution might be adding all buttons inside a btn-toolbar and to style that combination:

.btn-toolbar .btn {
    margin-bottom: 5px; 
}

Answered By - ckuijjer