Margin
Bootstrap 5 Margin component
Responsive Margin built with Bootstrap 5. MDB includes a wide range of shorthand responsive margin utility classes tomodify an element’s appearance.
How it works
Assign responsive-friendly margin
or padding
values to an element or
a subset of its sides with shorthand classes. Includes support for individual properties, all
properties, and vertical and horizontal properties. Classes are built from a default Sass map
ranging from .25rem
to 3rem
.
Note: If you want to add margin to the left side you must use the class
ms-*
(margin start) instead of ml-*
(margin left).
Likewise for the margin on the right: you have to use the class me-*
(margin end) instead
of mr-*
(margin right).
Below is an example using classes for the right margin with a visual representation of their sizes. The same sizes apply to all directions (left, right, top, bottom) and for both margins and padding.
Class name | Size | Visual representation |
---|---|---|
.me-1 |
0.25rem | |
.me-2 |
0.5rem | |
.me-3 |
1rem | |
.me-4 |
1.5rem | |
.me-5 |
3rem |
Notation
Spacing utilities that apply to all breakpoints, from xs
to xxl
,
have no breakpoint abbreviation in them. This is because those classes are applied from
min-width: 0
and up, and thus are not bound by a media query. The remaining
breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size}
for
xs
and {property}{sides}-{breakpoint}-{size}
for sm
,
md
, lg
, xl
, and xxl
.
Where property is one of:
m
- for classes that setmargin
p
- for classes that setpadding
Where sides is one of:
-
t
- for classes that setmargin-top
orpadding-top
-
b
- for classes that setmargin-bottom
orpadding-bottom
-
s
- (start) for classes that setmargin-left
orpadding-left
-
e
- (end) for classes that setmargin-right
orpadding-right
-
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
orpadding
on all 4 sides of the element
Where size is one of:
-
0
- for classes that eliminate themargin
orpadding
by setting it to0
-
1
- (by default) for classes that set themargin
orpadding
to$spacer * .25
-
2
- (by default) for classes that set themargin
orpadding
to$spacer * .5
-
3
- (by default) for classes that set themargin
orpadding
to$spacer
-
4
- (by default) for classes that set themargin
orpadding
to$spacer * 1.5
-
5
- (by default) for classes that set themargin
orpadding
to$spacer * 3
auto
- for classes that set themargin
to auto
(You can add more sizes by adding entries to the $spacers
Sass map variable.)