Gutters te a awm

Gutters hi i column inkar padding a ni a, Bootstrap grid system-a content awmte chu responsive taka space leh align nan hman a ni.

He page ah hian

An hnathawh dan

Gutters chu column content inkara gap awmte a ni a, horizontal -in a siam a paddingni. Column tinah padding-rightleh kan set a, chu chu row tin bul leh tawp lamah offset turin negative hmangin content align turin kan hmang bawk.padding-leftmargin
Gutters chu 1.5rem( 24px) wide atanga tan a ni. Hei hian kan grid chu padding leh margin spacers scale nen kan inmil thei a ni.
Gutters te chu responsive takin a siamrem thei bawk. Horizontal gutter, vertical gutter, leh gutter zawng zawng siam danglam turin breakpoint-specific gutter class hmang ang che.

Horizontal gutters a awm bawk

.gx-*class hmangin horizontal gutter zau zawng control theih a ni. The .containeror .container-fluidparent chu siamrem a ngai mai thei a, gutter lian zawk pawh hman a nih chuan duh loh zawng overflow awm loh nan, matching padding utility hmangin. Entirnan, a hnuaia entirnan hian padding kan tipung a .px-4:

Custom column padding a awm bawk

html tih a ni

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

A solution dang chu class .rownen wrapper around the dah belh hi a ni :.overflow-hidden

Custom column padding a awm bawk

html tih a ni

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Vertical gutters a awm bawk

.gy-*classes hmangin column hrang hrangin line thara an wrap hunah row chhunga vertical gutter zau zawng control theih a ni. Horizontal gutters ang bawkin vertical gutters hian .rowpage tawp lama awm hnuai lamah overflow engemaw zat a thlen thei bawk. Chutiang a nih chuan class .rownen wrapper around i dah belh ang :.overflow-hidden

Custom column padding a awm bawk

html tih a ni

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Horizontal & vertical gutters a awm bawk

.g-*.overflow-hiddenclasses hmangin horizontal gutter widths control theih a ni a, a hnuaia entirnan hian gutter width tlem zawk kan hmang a, chuvangin wrapper class dah belh a ngai dawn lo .

Custom column padding a awm bawk

html tih a ni

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Row column te chu gutters a ni

Row column ah hian gutter class pawh dah theih a ni bawk . A hnuaia entirnan hian responsive row column leh responsive gutter class kan hmang a.

Row column a awm

html tih a ni

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

Gutters a awm lo

Kan grid class ruat lawk tawha column inkar gutter awmte chu .g-0. Hei hian immediate children column zawng zawng atanga negative margins .rowleh horizontal te chu a paih chhuak vek a ni.padding

Edge-to-edge design i mamawh em? Drop the parent .containeror .container-fluidleh add .mx-0to the .rowoverflow awm loh nan.

Practice-ah chuan hetiang hian a lang. Hriat tur chu hei hi predefined grid class dang zawng zawng (column zau zawng, responsive tiers, reorder, leh a dangte pawh tel) nen i hmang chhunzawm thei ang.

.col-sm-6 .col-md-8 tih a ni

.col-6 .col-md-4 tih a ni

html tih a ni

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Gutters te chu thlak rawh

Class te hi Sass map atanga siam a ni a, chu chu $guttersSass map atanga rochun a $spacersni.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);