Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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
–
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
–
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
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
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.
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)
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
