Notation
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, xxl.
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- (start) for classes that setmargin-leftorpadding-leftin LTR,margin-rightorpadding-rightin RTLe- (end) for classes that setmargin-rightorpadding-rightin LTR,margin-leftorpadding-leftin RTLx- 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 to01- (by default) for classes that set themarginorpaddingto$spacer * .252- (by default) for classes that set themarginorpaddingto$spacer * .53- (by default) for classes that set themarginorpaddingto$spacer4- (by default) for classes that set themarginorpaddingto$spacer * 1.55- (by default) for classes that set themarginorpaddingto$spacer * 3auto- for classes that set themarginto auto
Examples
Here are some representative examples of these classes:
Code Example
.mt-0 { margin-top: 0 !important; } .ms-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
Includes an .mx-auto class for horizontally centering
Centered element
Code Example
<div class="mx-auto" style="width: 200px;"> Centered element </div>
Gap
Grid item 1
Grid item 2
Grid item 3
Code Example
<div class="d-grid gap-3"> <div class="p-2 bg-light border">Grid item 1</div> <div class="p-2 bg-light border">Grid item 2</div> <div class="p-2 bg-light border">Grid item 3</div> </div>