Skip to main content Skip ad navigationem soUicitudo
in English

Gutters

Fustulae paginae sunt inter columnas tuas, ad spatium responsive adhibitum et align content in systemate craticula Bootstrap.

Quam ad operandum

  • Iaculae lacunae inter columnae contentae horizontalibus creatae sunt padding. Constituimus padding-rightet padding-leftin unaquaque columna, et negando marginad offset quod in principio et fine cuiusque ordinis ad align contentum adhibemus.

  • Tetigisset domatum fistulas committitur 1.5rem( 24px) lata. Hoc nobis permittit ut nostram necessitatem in Nullam et marginem spacers scalae inserere.

  • Iuliae responsive componi possunt. Utere punctorum specialium triviarum ad modificandas fistulas horizontales, canales verticales, et omnes canales.

Horizontalis tetigisset domatum fistulas

.gx-*classes ad moderandas fistulas horizontales inversas. .containerAut parens aptari .container-fluidpotest si maiores canales adhibentur etiam ad vitandam inutilem redundantiam, adaptatione usus utilitatis. Exempli gratia in hoc exemplo Nullam additammus cum .px-4:

Custom column padding
Custom column padding
<div class="container px-4">
  <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>

Vel solutio est fasciam .rowcum .overflow-hiddenclasse adicere;

Custom column padding
Custom column padding
<div class="container overflow-hidden">
  <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 tetigisset domatum fistulas

.gy-*classes ad moderandas fistulas inversas verticales adhiberi possunt. Ut tetigulae horizontales, canales verticales aliquantum redundantiam efficere possunt infra .rowad finem paginae. .rowSi hoc incidit, fasciam cum .overflow-hiddenclasse addis ;

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container overflow-hidden">
  <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>

Horizontalis & vertical tetigisset domatum fistulas

.g-*classes ad moderandas fistulas horizontales inversas, hoc exemplo utimur minorem latitudinem canalem, ideo non opus erit addere .overflow-hiddenfasciam classis.

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container">
  <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 columnas tetigisset domatum fistulas

Gutter classes etiam ad columnas remigandi addi possunt . In hoc exemplo utimur columnis responsuris et canaliculis responsuris.

Row columna
Row columna
Row columna
Row columna
Row columna
Row columna
Row columna
Row columna
Row columna
Row columna
<div class="container">
  <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>

Non tetigisset domatum fistulas

Canales inter columnas in eget classibus praedefinitis nostris tolli possunt .g-0. Hoc removet nega- margins e .rowet horizontalem paddingab omnibus immediatis infantum columnis.

Egesne ora ut- crepidine consilio? .containerAut parens stilla .container-fluid.

Re, hic quam spectat. Nota potes hoc uti cum omnibus aliis classibus praefinitis eget (including columnas latitudines, ordines, reordinationes et plura).

.col-sm-6 .col-md-8
.col-6 .col-md-4
<div class="row g-0">
  <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>

Mutare tetigisset domatum fistulas

Classes ex tabula Sass aedificata, quae ex $gutterstabula Sass hereditaria est $spacers.

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