Spacing a awm

Bootstrap hian element pakhat hmel siam danglam theihna tur shorthand responsive margin, padding, leh gap utility class hrang hrang a nei a.

He page ah hian

Margin leh padding te a awm bawk

Element emaw a sir subset emaw hnenah shorthand class hmangin responsive-friendly marginemaw value emaw dah rawh. paddingProperty pakhat zel, property zawng zawng, leh vertical leh horizontal property te support a keng tel bawk. Class te hi default Sass map atanga siam a ni .25rema, 3rem.

CSS Grid layout module hman dan tur? Chu ai chuan gap utility hman tum zawk rawh.

Notation hmanga ziah a ni

xsBreakpoint zawng zawng, from to -a hman tur spacing utility te xxlhian breakpoint abbreviation an nei lo. Hei hi a chhan chu chu class te chu atanga min-width: 0leh chunglam atanga hman a nih avangin media query-in a phuar lo a ni. Mahse, breakpoint dang zawng zawngah chuan breakpoint abbreviation a awm ve tho.

Class te chu format {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, leh xxl.

Khawiah nge property chu:

m- class set te tanmargin
p- class set te tanpadding

Khawiah nge sides chu pakhat a ni:

t- class hrang hranga set margin-toporpadding-top
b- class hrang hranga set margin-bottomorpadding-bottom
s- (start) class set margin-leftemaw padding-leftLTR-a awm margin-rightemaw padding-right, RTL-a awm emaw tan
e- (end) class set margin-rightemaw padding-rightLTR-a awm margin-leftemaw padding-left, RTL-a awm emaw tan
x- class hrang hrang set te tan *-leftleh*-right
y- class hrang hrang set te tan *-topleh*-bottom
blank - element sir 4 zawng zawnga a marginemaw set tu class te tanpadding

Khawiah nge size chu pakhat a ni:

0margin- class te tan chuan or paddingsetting hmangin a paih chhuak thin0
1- (by default) class hrang hrang tan marginor paddingto set te tan$spacer * .25
2- (by default) class hrang hrang tan marginor paddingto set te tan$spacer * .5
3- (by default) class hrang hrang tan marginor paddingto set te tan$spacer
4- (by default) class hrang hrang tan marginor paddingto set te tan$spacer * 1.5
5- (by default) class hrang hrang tan marginor paddingto set te tan$spacer * 3
automargin- to auto set tu class te tan

$spacers( Sass map variable-ah entry dah belhin size tam zawk i dah belh thei bawk .)

Entirna te

Heng class hrang hrangte aiawhtu entirnan thenkhat chu hetiang hi a ni:

.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 a awm a

Chu bâkah, Bootstrap hian .mx-autofixed-width block level content—chu chu content nei display: blockleh widthset—horizontal margins autochu

Centered element a awm

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

Negative margin a awm

CSS ah chuan marginproperty te hian negative value an hmang thei ( paddingthei lo). Heng negative margin te hi default in disable a ni a , mahse Sass ah hian setting hmangin enable theih a ni $enable-negative-margins: true.

Syntax chu default, positive margin utilities nen a inang deuh ber a, mahse nsize dil hmaa dah belh a ni. Hetah hian entirnan class pakhat chu a kalh a ni .mt-1:

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

Kar awl

, i hman hian parent grid container-a utilities display: gridi hmang thei ang . gapHei hian grid item pakhat zel ( display: gridcontainer fate)-ah margin utilities dah belh a ngai lo thei a ni. Gap utilities te hi default in an chhang thei a, kan utilities API hmanga siam a ni a, $spacersSass map atanga siam a ni.

Grid item 1 a ni

Grid item 2 a ni

Grid item 3-na a ni

html tih a ni

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

Support hian Bootstrap-a grid breakpoint zawng zawng responsive option a keng tel a, chubakah $spacersmap atanga size paruk ( 0– 5) a awm bawk. Utility class a awm lo .gap-autoa, effective takin .gap-0.

Sass a ni

Maps te pawh a awm

Spacing utilities te hi Sass map hmangin kan puang a, chutah chuan kan utilities API hmangin kan siam chhuak thin.

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

Utilities API hmanga thil tih a ni

Spacing utilities chu kan utilities API ah hian scss/_utilities.scss. Utilities API hman dan zir rawh.

    "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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),