Spacing a awm

Bootstrap hian element pakhat hmel siam danglam theihna tur shorthand responsive margin leh padding utility class hrang hrang a keng tel a.

A hnathawh dan

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.

Notation hmanga ziah a ni

xsBreakpoint zawng zawng, from to -a hman tur spacing utility te xlhian 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 , , , leh atan format hmangin an vuah {property}{sides}-{size}a ni.xs{property}{sides}-{breakpoint}-{size}smmdlgxl

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
• l- class hrang hranga set margin-leftorpadding-left
• r- class hrang hranga set margin-rightorpadding-right
• 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;
}

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

<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). 4.2 atang khan a chunga non-zero integer size tarlan zawng zawngah negative margin utilities kan dah belh tawh (eg, 1, 2, 3, 4, 5). Heng utilities te hi breakpoint hrang hranga grid column gutters customize nan a tha hle.

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

Hetah hian Bootstrap grid chu medium ( md) breakpoint leh a chung lam a customize dan entir nan kan rawn tarlang e. .colKan padding chu kan tipung a .px-md-5, chutah chuan kan counteract a, chu chu .mx-md-n5on the parent .row.

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>