Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No margin-bottom on bootstrap button?

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/

enter image description here

<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>
like image 944
Sébastien Gicquel Avatar asked Oct 17 '14 15:10

Sébastien Gicquel


People also ask

How do I remove the bottom margin in bootstrap?

Adding margin-bottom: 0px; to footer. footer-home within custom. css should solve your problem.

How do you remove the bottom margin in CSS?

css and the speciifc rule is on the . row div. and make it margin-bottom: 0px; Note: this is really easy to figure out using Chrome dev tools!!


1 Answers

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; 
}
like image 69
ckuijjer Avatar answered Oct 11 '22 13:10

ckuijjer