Spacing
Bootnews includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
Margin and Padding
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.
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:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoms- for classes that setmargin-leftorpadding-lefte- for classes that setmargin-rightorpadding-rightx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set a
marginorpaddingon all 4 sides of the element
Where size is one of:
0- for classes that eliminate themarginorpaddingby setting it to005- (by default) for classes that set themarginorpaddingto.1251- (by default) for classes that set themarginorpaddingto.252- (by default) for classes that set themarginorpaddingto.53- (by default) for classes that set themarginorpaddingto14- (by default) for classes that set themarginorpaddingto1.55- (by default) for classes that set themarginorpaddingto36- (by default) for classes that set themarginorpaddingto4.57- (by default) for classes that set themarginorpaddingto68- (by default) for classes that set themarginorpaddingto7.59- (by default) for classes that set themarginorpaddingto9auto- for classes that set themarginto auto
<div class="ms-1">margin left .25rem</div>
<div class="me-2">margin right .5rem</div>
<div class="mt-3">margin top 1rem</div>
<div class="mb-4">margin bottom 1.5rem</div>
<div class="mx-6">margin horizontal 4.5rem</div>
<div class="my-7">margin vertical 6rem</div>
You can editing sizes from: assets/scss/_variables.scss
Editing spacing code from assets/scss/bootstrap/utilities/_spacing.scss
Margin Top Minus
This class is for make margin top layout minus
.mt-minus- for classes that setmargin top -2.5rem.mt-minus-sm- for classes that setmargin top -1rem.mt-minus-md- for classes that setmargin top -3rem.mt-minus-lg- for classes that setmargin top -6rem
Margin Module
This class is for make margin module
.m-module- for classes that setmargin 2rem.ms-module- for classes that setmargin left 2rem.me-module- for classes that setmargin right 2rem.mt-module- for classes that setmargin top 2rem.mb-module- for classes that setmargin bottom 2rem
Clear Property
This property is used to specify that which side of a floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element which is floated, it will.
The classes are named using the format {sides}-{size}
Where property is one of:
gap- for classes that setclear: both
Where size is one of:
0- (by default) for classes that set height to.1.px05- (by default) for classes that set height to.5075- (by default) for classes that set height to.751- (by default) for classes that set height to115- (by default) for classes that set height to1.52- (by default) for classes that set height to225- (by default) for classes that set height to2.53- (by default) for classes that set height to34- (by default) for classes that set height to4
Example
<div class="gap-1">chear both with height 1rem</div>
Read more documentation in here