CODEWITHSUNDEEP
csstwitter-bootstrap
Sébastien Gicquel
Sébastien Gicquel

Reputation: 4386

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>

Upvotes: 15

Views: 40809

Answers (5)

GoldenaArcher
GoldenaArcher

Reputation: 983

With bootstrap 5, they have change the syntax a little bit, it can be found here: Spacing.

The format is: {property}{sides}-{size}.

The property is m for margin, p for padding.

The sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
  • e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

The size is one of the:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto

Upvotes: 0

Zdenoslav
Zdenoslav

Reputation: 51

mb-5 = margin bottom ..just add that :) sorted :)

Upvotes: 5

user6904754
user6904754

Reputation:

Just add the spacing class. m for margin and p for padding.

 <button class="btn btn-success mr-2" type="submit">Add</button>
 <button class="btn btn-danger mr-2" type="button">Delete</button>

so, here mr is margin-right. similarly, you can add do for other cases.

Upvotes: 5

Berthy
Berthy

Reputation: 358

I think that it's the normal behavior ( not 100% sure ) because it's "cleaner" to add margin ourselves when we want it that having to remove the default margin when we don't want it, from my opinion...

http://getbootstrap.com/components/#btn-groups

There's no margin on bootstrap's buttons examples, only on the parent div class btn-group but it's coming from a different stylesheet ( docs.min.css ). So I think it's that way for devs to add their own custom margins.

See here:

enter image description here

Upvotes: 4

ckuijjer
ckuijjer

Reputation: 13814

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

Upvotes: 14

Related Questions