Margin

Quick reference

Assign responsive-friendly margin 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.

Overview

The margin 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 m - for classes that set margin

Where sides is one of:

• t - for classes that set margin-top
• b - for classes that set margin-bottom
• s - (start) for classes that set margin-left in LTR, margin-right in RTL
• e - (end) for classes that set margin-right in LTR, margin-left 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 on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin by setting it to 0
• 1 - (by default) for classes that set the margin to $spacer * .25
• 2 - (by default) for classes that set the margin to $spacer * .5
• 3 - (by default) for classes that set the margin to $spacer
• 4 - (by default) for classes that set the margin to $spacer * 1.5
• 5 - (by default) for classes that set the margin to $spacer * 3
• 6 - (by extended) for classes that set the margin to $spacer * 4
• 7 - (by extended) for classes that set the margin to $spacer * 5
• 8 - (by extended) for classes that set the margin to $spacer * 6
• 9 - (by extended) for classes that set the margin to $spacer * 7
• 10 - (by extended) for classes that set the margin to $spacer * 8
• auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Basic usage

Add margin to a single side

Control the margin on one side of an element using the m{t|e|b|s}-{size} utilities.

For example, mt-4 would add 1.5rem of margin to the top of an element, me-3 would add 1rem of margin to the right of an element, mb-5 would add 3rem of margin to the bottom of an element, and ms-2 would add 0.5rem of margin to the left of an element.

<div class="mt-4 ...">mt-4</div>
<div class="me-3 ...">me-3</div>
<div class="mb-5 ...">mb-5</div>
<div class="ms-2 ...">ms-2</div>

Add horizontal margin

Control the horizontal margin of an element using the mx-{size} utilities.

<div class="mx-5 ...">mx-5</div>

Add vertical margin

Control the vertical margin of an element using the my-{size} utilities.

<div class="my-5 ...">my-5</div>

Margin to all sides

Control the margin on all sides of an element using the m-{size} utilities.

<div class="m-5 ...">m-5</div>

Horizontal centering margin

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.

<div class="mx-auto ...">Centered element</div>

Right align margin

Control the righ-align margin of an element using the ms-auto utilities.

<div class="d-flex gap-4">
  <div>01</div>
  <div>02</div>
  <div class="ms-auto">03</div>
  <div>04</div>
  <div>05</div>
</div>

Using negative values

In CSS, margin properties can utilize negative values (padding cannot). These negative margins are enabled by default in FastBootstrap, 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 by the format {property}{sides}-n{size}.

<div class="bd-w-36 bd-h-16 ..."></div>
<div class="mt-n5">mt-n5</div>

Breakpoints and media queries

All margin utilities that supports responsive at specific breakpoints, using the following format {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, xl, and xxl.

For example, use my-md-4 to apply the my-4 utility at only medium screen sizes and above, my-3 for xs by default.

<div class="my-3 my-md-4 my-lg-6 ...">my-3 my-md-4 my-lg-6</div>