238

The latest documention has:

<p class="mb-0">Lorem ipsum</p>

What is mb-0?

0

7 Answers 7

423

Bootstrap 4

Bootstrap has a wide range of responsive margin and padding utility classes. They work for all breakpoints:

xs (<576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))

The classes are used in the format:

{property}{sides}-{size} for xs & {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

m - sets margin

p - sets padding


t - sets margin-top or padding-top

b - sets margin-bottom or padding-bottom

l - sets margin-left or padding-left

r - sets margin-right or padding-right

x - sets both padding-left and padding-right or margin-left and margin-right

y - sets both padding-top and padding-bottom or margin-top and margin-bottom

blank - sets a margin or padding on all 4 sides of the element


0 - sets margin or padding to 0

1 - sets margin or padding to .25rem (4px if font-size is 16px)

2 - sets margin or padding to .5rem (8px if font-size is 16px)

3 - sets margin or padding to 1rem (16px if font-size is 16px)

4 - sets margin or padding to 1.5rem (24px if font-size is 16px)

5 - sets margin or padding to 3rem (48px if font-size is 16px)

auto - sets margin to auto

See more at Bootstrap 4.5 - Spacing

Read more in w3schools

7
  • 36
    Class mb-0 in Bootstrap 4 is equivalent to margin-bottom: 0px; Does that sounds good ? Sep 4, 2019 at 8:10
  • These definitions can all be found in boostrap.css Aug 18, 2020 at 19:45
  • 3
    @java-addict301 Before 4 years, it took extra searches to find these definitions. Aug 20, 2020 at 6:04
  • Excellent answer! Will save this as a cheat-sheet.
    – NameKhan72
    Apr 7, 2021 at 0:45
  • xs (<=576px) should read xs (<576px), but it's too few characters for me to make the edit. Jan 7, 2022 at 1:03
59

Bootstrap 4

It is used to create a bottom margin of 0 (margin-bottom:0). You can see more of the new spacing utility classes here: https://getbootstrap.com/docs/4.0/utilities/spacing/

Related: How do I use the Spacing Utility Classes on Bootstrap 4

1
  • 4
    Thanks for providing a link to the original docs. I'd much rather read directly from the source rather than going through a 3rd party, like w3schools!
    – pbristow
    Jun 21, 2018 at 14:58
31

m - for classes that set margin, like this :

  • mt - for classes that set margin-top
  • mb - for classes that set margin-bottom
  • ml - for classes that set margin-left
  • mr - for classes that set margin-right
  • mx - for classes that set both margin-left and margin-right
  • my - for classes that set both margin-top and margin-bottom

Where size is one of margin :

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

Bootstrap has predefined classes that we use for styling. If you are familiar with CSS, you'd know what padding, margin and spacing etc. are.

mb-0 = margin-bottom:0;

OK now moving a little further in knowledge, bootstrap has more classes for margin including:

mt- = margin-top
mb- = margin-bottom
ml- = margin-left
mr- = margin-right
my- = it sets margin-left and margin-right at the same time on y axes
mX- = it sets margin-bottom and margin-top at the same time on X axes

This and much more is explained here https://getbootstrap.com/docs/5.0/utilities/spacing/ The best way to learn is through https://getbootstrap.com site itself. It explains a lot obout its built in classes.

4

m - sets margin

p - sets padding

t - sets margin-top or padding-top

b - sets margin-bottom or padding-bottom

l - sets margin-left or padding-left

r - sets margin-right or padding-right

x - sets both padding-left and padding-right or margin-left and margin-right

y - sets both padding-top and padding-bottom or margin-top and margin-bottom

blank - sets a margin or padding on all 4 sides of the element

0 - sets margin or padding to 0

1 - sets margin or padding to .25rem (4px if font-size is 16px)

2 - sets margin or padding to .5rem (8px if font-size is 16px)

3 - sets margin or padding to 1rem (16px if font-size is 16px)

4 - sets margin or padding to 1.5rem (24px if font-size is 16px)

5 - sets margin or padding to 3rem (48px if font-size is 16px)

auto - sets margin to auto

3

Since this "thread" is the first one to appear when searching for class="mb-0" I'd like to mention that all these answears are deprecated. Now in February 2022 bootstrap is V5.1 and this it the link to the new spacing notation to use in your classes: https://getbootstrap.com/docs/5.1/utilities/spacing/ (the main problem was with left and right which are now to be reference as start and end in the notation)

1
  • In the question, it is still mentioned that mb-0 in Bootstrap 4. Sep 1, 2022 at 10:04
1

class="mb-0"

m - sets margin

b - sets bottom margin or padding

0 - sets 0 margin or padding


CSS class

.mb-0{
       margin-bottom: 0
     }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.