Material Bootstrap Utilities Spacing


CSS for Spacing

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, 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, and xl.

Where property is one of:

Where sides is one of:

Where size is one of:

Text Alignment

.text-left - Left aligned text on all viewport sizes.

.text-center - Center aligned text on all viewport sizes.

.text-right - Right aligned text on all viewport sizes.

.text-sm-left - Left aligned text on viewports sized SM (small) or wider.

.text-md-left - Left aligned text on viewports sized MD (medium) or wider.

.text-lg-left - Left aligned text on viewports sized LG (large) or wider.

.text-xl-left - Left aligned text on viewports sized XL (extra-large) or wider.

.text-wrap - This text should wrap.

.text-monospace - This is in monospace