Pylder

Learje hoe't jo kolommen kinne wizigje mei in hantsjefol opsjes foar ôfstimming, oardering en kompensaasje troch ús flexbox-rastersysteem. Plus, sjoch hoe't jo kolomklassen brûke om breedtes fan net-rastereleminten te behearjen.

Op dizze side

Heads up! Wês wis dat jo de Grid-side earst lêze foardat jo dûke yn hoe't jo jo rasterkolommen kinne oanpasse en oanpasse.

Hoe't se wurkje

Kolommen bouwe op de flexbox-arsjitektuer fan it raster. Flexbox betsjut dat wy opsjes hawwe foar it feroarjen fan yndividuele kolommen en it wizigjen fan groepen fan kolommen op it rigelnivo . Jo kieze hoe't kolommen groeie, krimpje of oars feroarje.
By it bouwen fan rasteryndielingen giet alle ynhâld yn kolommen. De hiërargy fan Bootstrap's raster giet fan kontener nei rige nei kolom nei jo ynhâld. By seldsume gelegenheden kinne jo ynhâld en kolom kombinearje, mar wês bewust dat d'r ûnbedoelde gefolgen kinne wêze.
Bootstrap omfettet foarôf definieare klassen foar it meitsjen fan rappe, responsive layouts. Mei seis brekpunten en in tsiental kolommen op elke rastertier, hawwe wy tsientallen klassen al boud foar jo om jo winske yndielingen te meitsjen. Dit kin útskeakele wurde fia Sass as jo wolle.

Alignment

Brûk flexbox-ôfstimmingsprogramma's om kolommen fertikaal en horizontaal út te rjochtsjen.

Fertikale ôfstimming

Ien fan trije kolommen

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Ien fan trije kolommen

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontale ôfstimming

Ien fan twa kolommen

html

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Column wrapping

As mear as 12 kolommen wurde pleatst binnen ien rige, sil elke groep fan ekstra kolommen, as ien ienheid, wrap op in nije rigel.

.col-9

.col-4
Sûnt 9 + 4 = 13 > 12, dizze 4-kolom-wide div wurdt ferpakt op in nije line as ien oanienwei ienheid.

.col-6
Folgjende kolommen trochgean lâns de nije line.

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Kolom brekt

It brekken fan kolommen nei in nije rigel yn flexbox fereasket in lytse hack: foegje in elemint ta mei width: 100%wêr't jo jo kolommen yn in nije rigel wolle wrapje. Normaal wurdt dit dien mei meardere .rows, mar net elke útfiering metoade kin rekken mei dit.

.col-6 .col-sm-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Jo kinne dizze brek ek tapasse op spesifike brekpunten mei ús responsive display-hulpprogramma's .

.col-6 .col-sm-4

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Weromoardieling

Klassen bestelle

Brûk .order-klassen foar it kontrolearjen fan de fisuele folchoarder fan jo ynhâld. Dizze klassen binne responsyf, dus jo kinne it ordertroch brekpunt ynstelle (bygelyks .order-1.order-md-2). Omfettet stipe foar 1troch 5alle seis rasterlagen.

Earst yn DOM, gjin folchoarder tapast

Twadde yn DOM, mei in gruttere oarder

Tredde yn DOM, mei in folchoarder fan 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

D'r binne ek responsive .order-firsten .order-lastklassen dy't de orderfan in elemint feroarje troch respektivelik oan te passen order: -1en order: 6. Dizze klassen kinne ek wurde kombinearre mei de nûmere .order-*klassen as nedich.

Earst yn DOM, lêste besteld

Twadde yn DOM, net oardere

Tredde yn DOM, earst besteld

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Offset kolommen

Jo kinne rasterkolommen op twa manieren kompensearje: ús responsive .offset-rasterklassen en ús marzje-nutsbedriuwen . Gridklassen binne grutte om te passen by kolommen, wylst marzjes handiger binne foar rappe opmaak wêr't de breedte fan 'e offset fariabel is.

Offset klassen

Ferpleats kolommen nei rjochts mei help fan .offset-md-*klassen. Dizze klassen fergrutsje de loftermarge fan in kolom troch *kolommen. Bygelyks, .offset-md-4beweecht .col-md-4oer fjouwer kolommen.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Neist kolom wiskjen by responsive brekpunten, moatte jo miskien offsets weromsette. Sjoch dit yn aksje yn it rasterfoarbyld .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin utilities

Mei de ferhuzing nei flexbox yn v4, kinne jo marzje-hulpprogramma's brûke lykas sibbenkolommen fan inoar .me-autoôf te twingen.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Standalone kolomklassen

De .col-*klassen kinne ek brûkt wurde bûten in .rowte jaan in elemint in spesifike breedte. Wannear't kolomklassen brûkt wurde as net-direkte bern fan in rige, wurde de paddings weilitten.

.col-3: breedte fan 25%

.col-sm-9: breedte fan 75% boppe sm brekpunt

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

De klassen kinne wurde brûkt tegearre mei nutsbedriuwen om responsive driuwende ôfbyldings te meitsjen. Soargje derfoar dat de ynhâld yn in .clearfixwrapper is om de float te wiskjen as de tekst koarter is.

In paragraaf fan plakhâlder tekst. Wy brûke it hjir om it gebrûk fan 'e clearfix-klasse sjen te litten. Wy foegje hjir nochal wat sinleaze frases ta om te demonstrearjen hoe't de kolommen hjir ynteraksje mei it driuwende byld.

Sa't jo sjen kinne, wrapje de paragrafen sierlik om it driuwende byld. Stel jo no foar hoe dit der útsjen soe mei wat aktuele ynhâld hjiryn, ynstee fan allinich dizze saaie plakhâldertekst dy't trochgiet en trochgiet, mar eins gjin taastbere ynformaasje oerbringt. It nimt gewoan romte yn en moat net echt lêzen wurde.

En dochs, hjir binne jo, noch trochhâldend yn it lêzen fan dizze plakhâldertekst, hoopje op wat mear ynsjoch, of wat ferburgen peaskeaai fan ynhâld. In grapke, miskien. Spitigernôch is d'r hjir neat fan.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>