Spaysin we de bitwin dɛn

Bootstrap inklud wan big renj ɔf shɔthand rispɔnsiv margin ɛn padding yutiliti klas fɔ modify wan ɛlimɛnt in apinɛns.

Aw i de wok

Asayn rispɔnsiv-frenli marginɔ paddingvalyu to wan ɛlimɛnt ɔ wan sɔbsɛt fɔ in sayd dɛn wit shɔthand klas dɛn. Inklud sɔpɔt fɔ wan wan prɔpati dɛn, ɔl di prɔpati dɛn, ɛn vertikal ɛn ɔrizɔntal prɔpati dɛn. Dɛn bil klas dɛn frɔm wan difɔlt Sass map we de frɔm .25remto 3rem.

Noteshɔn fɔ di Baybul

Spaysin yutiliti dɛn we de aplay to ɔl di brekpɔynt dɛn, frɔm xsto xl, nɔ gɛt brekpɔynt abrɛvieshɔn insay dɛn. Dis na bikɔs dɛn klas dɛn de de aplay frɔm min-width: 0ɛn ɔp, ɛn so dɛn nɔ de tay dɛn bay wan midia kwɛstyɔn. Bɔt di ɔda brekpoint dɛn gɛt wan brekpoint abrevieshɔn.

Dɛn gi di klas dɛn nem bay we dɛn yuz di fɔmat {property}{sides}-{size}fɔ xsɛn {property}{sides}-{breakpoint}-{size}fɔ sm, md, lg, ɛn xl.

Usay prɔpati na wan pan:

m- fɔ klas dɛn we de sɛtmargin
p- fɔ klas dɛn we de sɛtpadding

Usay sayd dɛn na wan pan:

t- fɔ klas dɛn we de sɛt margin-topɔpadding-top
b- fɔ klas dɛn we de sɛt margin-bottomɔpadding-bottom
l- fɔ klas dɛn we de sɛt margin-leftɔpadding-left
r- fɔ klas dɛn we de sɛt margin-rightɔpadding-right
x- fɔ klas dɛn we de sɛt ɔl tu *-leftɛn*-right
y- fɔ klas dɛn we de sɛt ɔl tu *-topɛn*-bottom
blank - fɔ klas dɛn we de sɛt wan marginɔ paddingna ɔl di 4 say dɛn na di ɛlimɛnt

Usay saiz na wan pan:

0- fɔ klas dɛn we de pul di marginɔ paddingbay we dɛn sɛt am to0
1- (bay difɔlt) fɔ klas dɛn we de sɛt di marginɔ paddingto$spacer * .25
2- (bay difɔlt) fɔ klas dɛn we de sɛt di marginɔ paddingto$spacer * .5
3- (bay difɔlt) fɔ klas dɛn we de sɛt di marginɔ paddingto$spacer
4- (bay difɔlt) fɔ klas dɛn we de sɛt di marginɔ paddingto$spacer * 1.5
5- (bay difɔlt) fɔ klas dɛn we de sɛt di marginɔ paddingto$spacer * 3
auto- fɔ klas dɛn we de sɛt di marginto ɔto

(Yu kin ad mɔ saiz dɛn bay we yu ad ɛntri dɛn to di $spacersSass map vɛriɔbul.)

Ɛgzampul dɛn

Na sɔm ɛgzampul dɛn we de sho dɛn klas ya:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Ɔrizɔntal sɛntrin

Apat frɔm dat, Bootstrap gɛt bak wan .mx-autoklas fɔ ɔrizɔntal sɛntrɛd fiks-wid blɔk lɛvɛl kɔntinyu—dat na, kɔntinyu we gɛt display: blockɛn wan widthsɛt—bay we yu sɛt di ɔrizɔntal margin dɛn to auto.

Elemɛnt we de na di sɛnt

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>