Spacing
React Bootstrap 5 Spacing component
MDB includes a wide range of shorthand responsive margin and padding utility classes to modify 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
- for classes that setmargin-left
orpadding-left
in LTR,margin-start
orpadding-start
in RTL, -
e
- for classes that setmargin-right
orpadding-right
in LTR,margin-end
orpadding-end
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
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.)
Examples
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Horizontal centering
Additionally, Bootstrap also includes an .mx-auto
class for horizontally
centering fixed-width block level content—that is, content that has
display: block
and a width
set—by setting the horizontal margins
to auto
.
import React from 'react';
export default function App() {
return <div className="mx-auto" style={{width: "200"}}>Centered element</div>
}
Negative margin
In CSS, margin
properties can utilize negative values (padding
cannot). These negative margins are disabled by default, but can be enabled
in Sass by setting $enable-negative-margins: true
.
The syntax is nearly the same as the default, positive margin utilities, but with the
addition of n
before the requested size. Here’s an example class that’s the
opposite of .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
When using display: grid
, you can make use of gap utilities on the parent grid
container. This can save on having to add margin utilities to individual grid items (children
of a display: grid
container). Gap utilities are responsive by default, and are
generated via our utilities API, based on the $spacers
Sass map.
import React from 'react';
export default function App() {
return (
<div className="d-grid gap-3">
<div className="p-2 bg-light border">Grid item 1</div>
<div className="p-2 bg-light border">Grid item 2</div>
<div className="p-2 bg-light border">Grid item 3</div>
</div>
);
}
Extra scale for the bottom margin
By default, MDB provides an additional scale for the bottom margin.
This allows for easier positioning of larger elements (such as sections or design blocks) in relation to each other and more comfortable creating a layout with a consistent composition.
Note:The standard scale with classes from .mb-1
to .mb-5
works as normal.
The classes below are additional and only apply to the bottom margin.
.mb-6
3.5rem
.mb-7
4rem
.mb-8
5rem
.mb-9
6rem
.mb-10
8rem
.mb-11
10rem
.mb-12
12rem
.mb-13
14rem
.mb-14
16rem