Sɔtiwo

Srɔ̃ alesi nàtrɔ asi le sɔtiwo ŋu kple tiatia ʋɛ aɖewo hena ɖoɖowɔwɔ, ɖoɖowɔwɔ, kple vovototodedeameme akpe ɖe míaƒe flexbox grid ɖoɖoa ŋu. Gakpe ɖe eŋu la, kpɔ alesi nàzã kɔlam ƒe hatsotsowo atsɔ akpɔ nusiwo menye grid o ƒe kekemewo gbɔe.

Le axa sia dzi

Tawo yi dzi! Kpɔ egbɔ be yexlẽ Grid ƒe axaa gbã hafi nàge ɖe alesi nàtrɔ asi le wò grid ƒe sɔtiwo ŋu ahatrɔ asi le wo ŋui ŋu.

Ale si wowɔa dɔe

Sɔtiwo tu ɖe grid la ƒe flexbox xɔtuɖaŋu dzi. Flexbox fia be tiatia aɖewo le mía si hena sɔti ɖekaɖekawo tɔtrɔ kple sɔtiwo ƒe ƒuƒoƒowo ƒe tɔtrɔ le fli ƒe ɖoɖo nu . Ètiaa alesi sɔtiwo tsina, woɖiɖina, alo wotrɔna le mɔ bubu nu.
Ne wole grid ƒe ɖoɖowo tum la, emenyawo katã yia sɔtiwo me. Bootstrap ƒe grid ƒe ɖoɖo si le ɖoɖo nu la tsoa nugoe me yia fli me yia sɔti me yia wò nyatakakawo gbɔ. Le ɣeyiɣi siwo mebɔ o me la, àte ŋu aƒo emenyawo kple nyatiwo nu ƒu ɖekae, gake nyae be emetsonu siwo mèdi o ate ŋu ado tso eme.
Bootstrap la lɔ klass siwo woɖo ɖi do ŋgɔ hena ɖoɖowɔwɔ kabakaba, siwo ɖoa nya ŋu la ɖe eme. Esi breakpoint ade kple sɔti wuieve le grid tier ɖesiaɖe dzi ta la, míetu klass bla nanewo xoxo na wò be nàwɔ ɖoɖo siwo nèdi. Woateŋu awɔ esia nuwɔametɔe to Sass dzi ne èdi.

Ðoɖowɔwɔ ɖe ɖoɖo nu

Zã flexbox alignment utilities nàtsɔ aɖo sɔtiwo ɖe ɖoɖo nu le tsitrenu kple le tsia dzi.

Nusiwo woɖo ɖe ɖoɖo nu le tsitrenu

Sɔti etɔ̃awo dometɔ ɖeka

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

Sɔti etɔ̃awo dometɔ ɖeka

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

Nusiwo woɖo ɖe ɖoɖo nu le tsia dzi

Sɔti eve dometɔ ɖeka

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

Sɔtiwo ƒe agbalẽ xatsaxatsa

Ne wotsɔ sɔti siwo wu 12 da ɖe fli ɖeka me la, sɔti bubuwo ƒe ƒuƒoƒo ɖesiaɖe, abe akpa ɖeka ene, axatsa ɖe fli yeye dzi.

.kol-9 ƒe ƒuƒoƒo

.col-4
Esi wònye be 9 + 4 = 13 > 12 ta la, div sia si keke sɔti 4 la xɔa fli yeye ɖe fli yeye dzi abe xexlẽdzesi ɖeka si tsiã ɖe enu ene.

.col-6
Sɔti siwo kplɔe ɖo yi edzi le fli yeyea dzi.

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

Sɔtiwo ƒe gbagbã

Sɔtiwo gbãgbã ɖe fli yeye me le flexbox me bia hack sue aɖe: tsɔ element aɖe kpe ɖe width: 100%afisiafi si nèdi be yeaxatsa wò sɔtiwo ɖe fli yeye ŋu. Zi geɖe la, wowɔa esia kple .rows geɖe, gake menye dɔwɔwɔ ƒe mɔnu ɖesiaɖee ateŋu abu akɔnta le esia ŋu o.

.kɔl-6 .kɔl-sm-3

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

Àte ŋu awɔ ɖiɖiɖeme sia hã ŋudɔ le ɖiɖiɖemeƒe aɖewo koŋ kple míaƒe responsive display utilities .

.kɔl-6 .kɔl-sm-4

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

Gbugbɔ ɖoɖo ɖe ɖoɖo nu

Ðoɖo ɖe klasswo ŋu

Zã .order-klasswo hena wò nyatakakawo ƒe ɖoɖo si wokpɔna le nukpɔkpɔ me dzi ɖuɖu. Klass siawo ɖoa nya ŋu, eyata àte ŋu aɖo orderby breakpoint (le kpɔɖeŋu me, .order-1.order-md-2). Kpekpeɖeŋu na 1to 5le grid tiers adeawo katã me hã le eme.

Gbã le DOM me la, womewɔ sedede aɖeke ŋudɔ o

Evelia le DOM me, kple ɖoɖo si lolo wu

Etɔ̃lia le DOM me, kple ɖoɖo si nye 1

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

Azɔ hã, responsive .order-firstkple .order-lastclasses li siwo trɔa the orderof an element to dɔwɔwɔ order: -1kple order: 6, ɖe wo nɔewo yome. Woate ŋu atsaka klass siawo hã kple .order-*klass siwo ŋu xexlẽdzesi le ne ehiã.

Gbãtɔ le DOM me, wobia mamlɛtɔ

Evelia le DOM me, si womeɖo ɖe ɖoɖo nu o

Etɔ̃lia le DOM me, woɖoe gbã

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

Sɔtiwo ƒe vovototodedeameme

Àte ŋu aɖɔ grid sɔtiwo ɖo le mɔ eve nu: míaƒe .offset-grid klass siwo ɖoa nya ŋu kple míaƒe margin utilities . Woɖoa grid klasswo ƒe lolome be woasɔ kple sɔtiwo esime margins ɖea vi wu na ɖoɖowɔwɔ kabakaba afisi offset ƒe kekeme trɔna le.

Offset ƒe klasswo

Ʋu sɔtiwo yi ɖusime to .offset-md-*klasswo zazã me. Klass siawo dzia sɔti aɖe ƒe miame ƒe akpa dzi ɖe edzi *sɔtiwo. Le kpɔɖeŋu me, .offset-md-4eʋuna .col-md-4ɖe sɔti ene dzi.

.col-md-4 ƒe ƒuƒoƒo

.col-md-4 .ɖe-md-4 ƒe ƒuƒoƒo

.col-md-3 .wo ƒe tsɔtsɔme-md-3

.col-md-6 .wo ƒe tsɔtsɔme-md-3

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

Tsɔ kpe ɖe sɔtiwo ɖeɖeɖa le ŋuɖoɖo ƒe gbagbãƒewo ŋu la, ɖewohĩ ahiã be nàgbugbɔ aɖo offsetwo ɖe ɖoɖo nu. Kpɔ esia le dɔwɔwɔ me le grid ƒe kpɔɖeŋua me .

.kɔl-sm-5 .kɔl-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .dziɖuɖu-md-0

.kɔl-sm-6 .kɔl-md-5 .kɔl-lg-6

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

<div class="container">
  <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 ƒe dɔwɔnuwo

Le ʋuʋu yi flexbox le v4 me la, àteŋu azã margin utilities abe .me-autoalesi nàzi nɔviwo ƒe sɔtiwo dzi be woadzo le wo nɔewo gbɔ ene.

.col-md-4 ƒe ƒuƒoƒo

.col-md-4 .ms-ɖokuidziɖuɖu

.col-md-3 .ms-md-ʋu ƒe ʋuʋu

.col-auto .nye-ɖokui

.col-ʋu ƒe zɔzɔ

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

Klass siwo le wo ɖokui si

Woateŋu azã .col-*klassawo hã le a godo .rowatsɔ ana element aɖe ƒe kekeme tɔxɛ aɖe. Ɣesiaɣi si wozã sɔti ƒe klasswo abe fli aɖe ƒe vi siwo menye tẽ o ene la, woɖea paddingawo ɖa.

.col-3: kekeme nye 25% .

.col-sm-9: kekeme si nye 75% wu sm ƒe gbagbãƒe

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

Woateŋu azã klassawo ɖekae kple dɔwɔnuwo atsɔ awɔ nɔnɔmetata siwo le tsia dzi siwo ɖoa nya ŋu. Kpɔ egbɔ be yexatsa emenyawo ɖe .clearfixagbalẽ xatsaxatsa me be nàkɔ float la me ne nuŋɔŋlɔa le kpuie wu.

Teƒeɖoɖo ƒe nuŋɔŋlɔ ƒe memama aɖe. Míele ezãm le afisia tsɔ le clearfix ƒe klass la zazã ɖem fia. Míele nyagbe ʋee aɖewo siwo gɔmesese aɖeke mele o kpem ɖe eŋu le afisia be míatsɔ aɖe alesi sɔtiawo wɔa dɔe le afisia kple nɔnɔmetata si le tsia dzi la afia.

Abe alesi nàte ŋu akpɔe ene la, memamãawo xatsa nɔnɔmetata si le tsia dzi la nyuie. Azɔ bu alesi esia adze kple nya ŋutɔŋutɔ aɖewo le afisia ŋu kpɔ, tsɔ wu be wòanye teƒenɔla ƒe nuŋɔŋlɔ sia si tea ɖeɖi ame ŋu si yia edzi yia edzi, gake le nyateƒe me la, megblɔa nyatakaka ŋutɔŋutɔ aɖeke le. Ðeko wòxɔa teƒe eye mele be woaxlẽe ŋutɔŋutɔ o.

Eye ke hã, wòe nye esi, nègale kutri kum le teƒenɔla ƒe nuŋɔŋlɔ sia xexlẽ me, le mɔ kpɔm be gɔmesese bubu aɖewo nasu asiwò, alo easter azi ɣaɣla aɖewo siwo me nyawo le. Nukokoedoname aɖe, ɖewohĩ. Nublanuitɔe la, esiawo dometɔ aɖeke mele afisia o.

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