in English

Kɔlɔm dɛn

Lan aw fɔ chenj kɔlɔm dɛn wit wan anful opshɔn fɔ alaynɛshɔn, ɔda, ɛn ɔfset tank to wi fleksbɔks grid sistem. Plɛs, si aw fɔ yuz kɔlɔm klas fɔ manej width dɛn fɔ nɔ-grid ɛlimɛnt dɛn.

Na dis pej

Hed dɛn de ɔp! Mek shɔ se yu rid di Grid pej fɔs bifo yu dayv insay aw fɔ chenj ɛn kɔstɔmayz yu grid kɔlɔm dɛn.

Aw dɛn de wok

Kɔlɔm dɛn de bil pan di grid in fleksbɔks akitɛkɛt. Flexbox min se wi gɛt opshɔn fɔ chenj wan wan kɔlɔm dɛn ɛn chenj grup dɛn fɔ kɔlɔm dɛn na di row lɛvɛl . Yu kin pik aw kɔlɔm dɛn de gro, shrink, ɔ ɔda we fɔ chenj.
We yu de bil grid layout, ɔl di tin dɛn we de insay de go insay kɔlɔm dɛn. Di hayari fɔ Bootstrap in grid de go frɔm kɔntena to row to kɔlɔm to yu kɔntinyu. Sɔntɛnde, yu kin jɔyn di tin dɛn we de insay ɛn di kɔlɔm, bɔt no se sɔntin kin apin we yu nɔ bin want fɔ du.
Bootstrap inklud prɛdifayn klas dɛn fɔ mek fast, rispɔnsiv layout dɛn. Wit siks brekpoint ɛn wan duzin kɔlɔm dɛn na ɛni grid taya, wi gɛt dɔzin klas dɛn we dɛn dɔn ɔlrɛdi bil fɔ yu fɔ mek layout dɛn we yu want. Dis kin disable via Sass if yu want.

Alignmɛnt fɔ di wan dɛn we de

Yuz fleksbɔks alaynɛshɔn yutiliti fɔ alaynɛt kɔlɔm dɛn vertikal ɛn ɔrizɔntal wan.

Vɛtikal alaynɛshɔn

Wan pan tri kɔlɔm dɛn

html na di pikchɔ

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

Wan pan tri kɔlɔm dɛn

html na di pikchɔ

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

Ɔrizɔntal alaynɛshɔn

Wan pan tu kɔlɔm dɛn

html na di pikchɔ

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

Kɔlɔm fɔ rap

If dɛn put pas 12 kɔlɔm dɛn insay wan row, ɛni grup we gɛt ɛkstra kɔlɔm dɛn go, as wan yunit, rap pan nyu layn.

.kɔl-9

.col-4
Sins 9 + 4 = 13 > 12, dis 4-kכlכm-wayd div de gεt rap pan nyu layn as wan kכntigyu yunit.

.col-6
Di kɔlɔm dɛn we de kam afta dat kɔntinyu fɔ de along di nyu layn.

html na di pikchɔ

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

Kɔlɔm dɛn de brok

Fɔ brok kɔlɔm dɛn to nyu layn na fleksbɔks nid fɔ gɛt smɔl hack: ad wan ɛlimɛnt wit width: 100%ɛnisay we yu want fɔ rap yu kɔlɔm dɛn to nyu layn. Nɔmal wan dis kin akɔmplit wit bɔku .rows, bɔt nɔto ɔl implimɛnt mɛtɔd kin akɔn fɔ dis.

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

html na di pikchɔ

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

Yu kin yuz dis brek bak na sɔm patikyula brekpoint dɛn wit wi rispɔnsiv displei yutiliti dɛn .

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

html na di pikchɔ

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

Fɔ ɔda tin dɛn bak

Ɔda klas dɛn

Yuz .order-klas fɔ kɔntrol di we aw yu de si di tin dɛn we de insay de. Dɛn klas ya de ansa, so yu kin sɛt di orderbay brekpɔynt (ɛgz., .order-1.order-md-2). Inklud sɔpɔt fɔ 1tru 5akɔdin to ɔl di siks grid taya dɛn.

Fɔs na DOM, dɛn nɔ aplay ɛni ɔda

Sɛkɔn na DOM, wit wan big ɔda

Tɔd na DOM, wit wan ɔda we na 1

html na di pikchɔ

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

I gɛt bak rispɔnsiv .order-firstɛn .order-lastklas dɛn we de chenj di orderɔf wan ɛlimɛnt bay we dɛn de yuz order: -1ɛn order: 6, rispɛktvɔli. Dɛn klas ya kin miks bak wit di .order-*klas dɛn we gɛt nɔmba as nid de.

Fɔs na DOM, ɔda las

Sɛkɔn na DOM, we nɔ gɛt ɔda

Tɔd na DOM, dɛn ɔda fɔs

html na di pikchɔ

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

Fɔ ɔfset kɔlɔm dɛn

Yu kin ɔfset grid kɔlɔm dɛn tu we dɛn: wi .offset-grid klas dɛn we de ansa ɛn wi margin yutiliti dɛn . Grid klas dɛn gɛt saiz fɔ mek dɛn mach kɔlɔm dɛn we di margin dɛn kin yus mɔ fɔ kwik layout usay di wit fɔ di ɔfset kin chenj.

Ɔfset klas dɛn

Muv kɔlɔm dɛn to di rayt say yuz .offset-md-*klas dɛn. Dɛn klas ya kin mek di lɛft say na wan kɔlɔm bɔku bay *kɔlɔm dɛn. Fɔ ɛgzampul, .offset-md-4i de muv .col-md-4oba 4 kɔlɔm dɛn.

.kɔl-md-4

.kol-md-4 .ɔfset-md-4

.kol-md-3 .ɔfset-md-3

.kol-md-6 .ɔfset-md-3

html na di pikchɔ

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

Apat frɔm di kɔlɔm klia na di rispɔnsiv brekpɔynt dɛn, yu kin nid fɔ riset ɔfset dɛn. Si dis in akshɔn na di grid ɛgzampul .

.kol-sm-5 .kol-md-6

.kol-sm-5 .ɔfset-sm-2 .kol-md-6 .ɔfset-md-0

.kol-sm-6 .kol-md-5 .kol-lg-6

.kol-sm-6 .kol-md-5 .ɔfset-md-2 .kol-lg-6 .ɔfset-lg-0

html na di pikchɔ

<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 yutiliti dɛn

Wit di muv to flexbox in v4, yu kin yuz margin utilities laik .me-autofo fos sibling kolm away from wan anoda.

.kɔl-md-4

.kol-md-4 .ms-ɔto

.kol-md-3 .ms-md-ɔto

.kol-ɔto .mi-ɔto

.kol-ɔto

html na di pikchɔ

<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 kɔlɔm klas dɛn

Di .col-*klas dɛn kin yuz bak ausayd a .rowfɔ gi wan ɛlimɛnt wan patikyula wit. Ɛnitɛm we dɛn yuz kɔlɔm klas dɛn as nɔ-dayrɛkt pikin dɛn fɔ wan row, dɛn kin pul di pad dɛn.

.col-3: wit 25% .

.col-sm-9: wit 75% oba sm brek pכynt

html na di pikchɔ

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

Di klas dɛn kin yuz togɛda wit yutiliti fɔ mek rispɔnsiv flot imej dɛn. Mek shɔ se yu rap di tin dɛn we de insay insay wan .clearfixwrap fɔ mek di flot klia if di tɛks shɔt.

Wan paregraf we gɛt tɛks we gɛt ples. Wi de yuz am ya fɔ sho di yus fɔ di kliafiks klas. Wi de ad bɔku bɔku frɛz dɛn we nɔ gɛt minin ya fɔ sho aw di kɔlɔm dɛn de intarakt ya wit di pikchɔ we de flɔt.

As yu si di paregraf dɛn rap fayn fayn wan rawnd di pikchɔ we de flɔt. Naw imajin aw dis go luk wit sɔm aktual kɔntinyu insay ya, pas jɔs dis bɔring pleshɔlda tɛks we de go bifo ɛn go bifo, bɔt rili de gi ɛni tanjibul infɔmeshɔn na. I jɔs de tek ples ɛn i nɔ fɔ rili rid am.

Ɛn yet, yu de ya, stil de kɔntinyu fɔ rid dis pleshɔlda tɛks, de op fɔ sɔm mɔ insayt, ɔ sɔm ayd ista eg fɔ kɔntinyu. Wan jok, sɔntɛm. Na ɔnfɔni, nɔbɔdi nɔ de pan dat ya.

html na di pikchɔ

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