Margin
Assign responsive-friendly padding values to an element or a subset of its sides with shorthand classes.
|
Class
|
Properties
|
|---|---|
| m-0 | |
| m-1 | |
| m-2 | |
| m-3 | |
| m-4 | |
| m-5 | |
| m-6 | |
| m-7 | |
| m-8 | |
| m-10 | |
| m-12 | |
| m-16 | |
| m-20 | |
| m-24 | |
| m-32 | |
| m-40 | |
| m-48 | |
| m-56 | |
| m-64 | |
| m-72 | |
| m-80 | |
| m-88 | |
| m-96 | |
| m-px | |
| my-0 | |
| my-1 | |
| my-2 | |
| my-3 | |
| my-4 | |
| my-5 | |
| my-6 | |
| my-7 | |
| my-8 | |
| my-10 | |
| my-12 | |
| my-16 | |
| my-20 | |
| my-24 | |
| my-32 | |
| my-40 | |
| my-48 | |
| my-56 | |
| my-64 | |
| my-72 | |
| my-80 | |
| my-88 | |
| my-96 | |
| my-px | |
| mx-0 | |
| mx-1 | |
| mx-2 | |
| mx-3 | |
| mx-4 | |
| mx-5 | |
| mx-6 | |
| mx-7 | |
| mx-8 | |
| mx-10 | |
| mx-12 | |
| mx-16 | |
| mx-20 | |
| mx-24 | |
| mx-32 | |
| mx-40 | |
| mx-48 | |
| mx-56 | |
| mx-64 | |
| mx-72 | |
| mx-80 | |
| mx-88 | |
| mx-96 | |
| mx-px | |
| mt-0 | |
| mt-1 | |
| mt-2 | |
| mt-3 | |
| mt-4 | |
| mt-5 | |
| mt-6 | |
| mt-7 | |
| mt-8 | |
| mt-10 | |
| mt-12 | |
| mt-16 | |
| mt-20 | |
| mt-24 | |
| mt-32 | |
| mt-40 | |
| mt-48 | |
| mt-56 | |
| mt-64 | |
| mt-72 | |
| mt-80 | |
| mt-88 | |
| mt-96 | |
| mt-px | |
| me-0 | |
| me-1 | |
| me-2 | |
| me-3 | |
| me-4 | |
| me-5 | |
| me-6 | |
| me-7 | |
| me-8 | |
| me-10 | |
| me-12 | |
| me-16 | |
| me-20 | |
| me-24 | |
| me-32 | |
| me-40 | |
| me-48 | |
| me-56 | |
| me-64 | |
| me-72 | |
| me-80 | |
| me-88 | |
| me-96 | |
| me-px | |
| mb-0 | |
| mb-1 | |
| mb-2 | |
| mb-3 | |
| mb-4 | |
| mb-5 | |
| mb-6 | |
| mb-7 | |
| mb-8 | |
| mb-10 | |
| mb-12 | |
| mb-16 | |
| mb-20 | |
| mb-24 | |
| mb-32 | |
| mb-40 | |
| mb-48 | |
| mb-56 | |
| mb-64 | |
| mb-72 | |
| mb-80 | |
| mb-88 | |
| mb-96 | |
| mb-px | |
| ms-0 | |
| ms-1 | |
| ms-2 | |
| ms-3 | |
| ms-4 | |
| ms-5 | |
| ms-6 | |
| ms-7 | |
| ms-8 | |
| ms-10 | |
| ms-12 | |
| ms-16 | |
| ms-20 | |
| ms-24 | |
| ms-32 | |
| ms-40 | |
| ms-48 | |
| ms-56 | |
| ms-64 | |
| ms-72 | |
| ms-80 | |
| ms-88 | |
| ms-96 | |
| ms-px |
Usage
Individual margin
Axis margin
<div class="m-5"></div>
<div class="my-5"></div>
<div class="mx-5"></div>
Horizontal centering
Use the .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
Negative margin
Margin properties can utilize negative values. These negative margins are enabled by default, but can be disabled in Sass by setting $enable-negative-margins: false.
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 .mb-n5:
Responsive
Responsive variations also exist for each margin value. Use the .m-{breakpoint}-{value} or .m{position}-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing margin utility.
<!-- All sides -->
<div class="m-5 m-lg-10 ..."></div>
<!-- Individual side -->
<div class="mt-5 mt-lg-10 ..."></div>