Spaysin we de bitwin dɛn

Bootstrap inklud wan big renj ɔf shɔthand rispɔnsiv margin, padding, ɛn gap yutiliti klas dɛn fɔ chenj di we aw wan ɛlimɛnt de luk.

Na dis pej

Margin ɛn padding

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.

Yuz di CSS Grid layout modul? Tink bɔt fɔ yuz di gap yutiliti .

Noteshɔn fɔ di Baybul

Spaysin yutiliti dɛn we de aplay to ɔl di brekpɔynt dɛn, frɔm xsto xxl, 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, xl, ɛn xxl.

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
s- (start) fɔ klas dɛn we sɛt margin-leftɔ padding-leftinsay LTR, margin-rightɔ padding-rightinsay RTL
e- (ɛnd) fɔ klas dɛn we sɛt margin-rightɔ padding-rightinsay LTR, margin-leftɔ padding-leftinsay RTL
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;
}

.ms-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>

Negatif margin fɔ di wan dɛn we de

Insay CSS, marginprɔpati dɛn kin yuz nɛgitiv valyu dɛn ( paddingnɔ kin ebul). Dɛn negatif margin ya de disable bay difɔlt , bɔt dɛn kin ɛnabul dɛn na Sass bay we dɛn sɛtin $enable-negative-margins: true.

Di sɛntaks de nia di sem wit di difɔlt, pɔsitiv margin yutiliti dɛn, bɔt wit di addɛshɔn fɔ nbifo di saiz we dɛn aks fɔ. Na wan ɛgzampul klas we na di ɔpɔzit fɔ .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Spes

We yu de yuz display: grid, yu kin yuz gapyutiliti dɛn na di mama grid kɔntena. Dis kin sev fɔ ad margin yutiliti to wan wan grid aytem dɛn (pikin dɛn fɔ wan display: gridkɔntena). Gap yutiliti dɛn de ansa bay difɔlt, ɛn dɛn de jenarayz dɛn tru wi yutiliti dɛn API, bays pan di $spacersSass map.

Grid aytem 1. Di wan dɛn we de na di grid

Grid aytem 2. Di wan dɛn we de na di grid

Grid aytem 3. Di wan dɛn we de na di grid

<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>

Sɔpɔt inklud rispɔnsiv opshɔn fɔ ɔl di Bootstrap in grid brekpɔynt dɛn, ɛn bak siks saiz dɛn frɔm di $spacersmap ( 0– 5). No .gap-autoyutiliti klas nɔ de as i ifɛktiv wan di sem lɛk .gap-0.

Sass we bin de

Map dɛn

Spacing yutiliti dɛn de diklar via Sass map ɛn afta dat dɛn de jenarayz wit wi yutiliti API.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Yutiliti dɛn API

Spacing yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn API.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),