Bootstrap grid ɛgzampul dɛn

Besik grid layout fɔ mek yu sabi fɔ bil insay di Bootstrap grid sistem.

Insay dɛn ɛgzampul ya .themed-grid-col, dɛn ad di klas to di kɔlɔm dɛn fɔ ad sɔm tim dɛn. Dis nɔto klas we de na Bootstrap bay difɔlt.

Fayv grid taya dɛn

Fayv taya de fɔ di Bootstrap grid sistem, wan fɔ ɛni rɛnj ɔf divays dɛn we wi de sɔpɔt. Ɛni taya de stat wit wan minimum viupɔt saiz ɛn i de aplay fɔ di big divays dɛn ɔtomɛtik wan pas dɛn ɔvarayd dɛn.

.kɔl-4
.kɔl-4
.kɔl-4
.kɔl-sm-4
.kɔl-sm-4
.kɔl-sm-4
.kɔl-md-4
.kɔl-md-4
.kɔl-md-4
.kɔl-lg-4
.kɔl-lg-4
.kɔl-lg-4
.kɔl-xl-4
.kɔl-xl-4
.kɔl-xl-4
.kɔl-xxl-4
.kɔl-xxl-4
.kɔl-xxl-4

Tri ikwal kɔlɔm dɛn

Gɛt tri ikwal-wid kɔlɔm dɛn we bigin na dɛsktɔp ɛn skel to big dɛsktɔp dɛn . Na mobayl divays dɛn, tablɛt dɛn ɛn dɔŋ ya, di kɔlɔm dɛn go stak ɔtomɛtik wan.

.kɔl-md-4
.kɔl-md-4
.kɔl-md-4

Tri ikwal kɔlɔm dɛn ɔltɛrnativ

We yu yuz di .row-cols-*klas dɛn, yu kin mek wan grid we gɛt ikwal kɔlɔm dɛn izi wan.

.colpikin fɔ .row-cols-md-3
.colpikin fɔ .row-cols-md-3
.colpikin fɔ .row-cols-md-3

Tri kɔlɔm dɛn we nɔ ikwal

Gɛt tri kɔlɔm dɛn we bigin na dɛsktɔp ɛn skel to big dɛsktɔp dɛn we gɛt difrɛn wit. Mɛmba se, grid kɔlɔm dɛn fɔ ad to twɛlv fɔ wan ɔrizɔntal blɔk. Mɔ pas dat, ɛn kɔlɔm dɛn bigin fɔ stak ilɛksɛf na di say we dɛn de si di pikchɔ.

.kɔl-md-3
.kɔl-md-6
.kɔl-md-3

Tu kɔlɔm dɛn

Gɛt tu kɔlɔm dɛn we bigin na dɛsktɔp ɛn skel to big dɛsktɔp dɛn .

.kɔl-md-8
.kɔl-md-4

Ful wit, wan kɔlɔm

No grid klas nɔ nid fɔ ful-wid ɛlimɛnt dɛn.

Tu kɔlɔm dɛn wit tu kɔlɔm dɛn we dɛn dɔn nɛst

Per di dokumɛnt, nest izi—jɔs put wan row fɔ kɔlɔm dɛn insay wan kɔlɔm we dɔn de. Dis de gi yu tu kɔlɔm dɛn we de stat na dɛsktɔp ɛn skel to big dɛsktɔp , wit ɔda tu (ikwal wit) insay di big kɔlɔm.

Na mobayl divays saiz, tablɛt ɛn dɔŋ, dɛn kɔlɔm ya ɛn dɛn nest kɔlɔm dɛn go stak.

.kɔl-md-8
.kɔl-md-6
.kɔl-md-6
.kɔl-md-4

Miks: mobayl ɛn dɛsktɔp

Di Bootstrap v4 grid sistem gɛt fayv taya dɛn fɔ klas dɛn: xs (ɛkstra smɔl, dɛn nɔ de yuz dis klas infiks), sm (smɔl), md (midul), lg (big), ɛn xl (ɛkstra big). Yu kin yuz klos to ɛni kɔmbaynshɔn fɔ dɛn klas ya fɔ mek mɔ dinamik ɛn fleksibul layout dɛn.

Ɛni taya fɔ klas dɛn de skel ɔp, we min se if yu plan fɔ sɛt di sem wit fɔ md, lg ɛn xl, yu jɔs nid fɔ spɛsifa md.

.kɔl-md-8
.kɔl-6 .kɔl-md-4
.kɔl-6 .kɔl-md-4
.kɔl-6 .kɔl-md-4
.kɔl-6 .kɔl-md-4
.kɔl-6
.kɔl-6

Miks: mobayl, tablɛt, ɛn dɛsktɔp

.kol-sm-6 .kol-lg-8
.kɔl-6 .kɔl-lg-4
.kɔl-6 .kɔl-sm-4
.kɔl-6 .kɔl-sm-4
.kɔl-6 .kɔl-sm-4

Gɔta dɛn

Wit .gx-*klas, dɛn kin ajɔst di ɔrizɔntal gɔta dɛn.

.colwit .gx-4gɔta dɛn
.colwit .gx-4gɔta dɛn
.colwit .gx-4gɔta dɛn
.colwit .gx-4gɔta dɛn
.colwit .gx-4gɔta dɛn
.colwit .gx-4gɔta dɛn

Yuz di .gy-*klas dɛn fɔ kɔntrol di vertikal gɔta dɛn.

.colwit .gy-4gɔta dɛn
.colwit .gy-4gɔta dɛn
.colwit .gy-4gɔta dɛn
.colwit .gy-4gɔta dɛn
.colwit .gy-4gɔta dɛn
.colwit .gy-4gɔta dɛn

Wit .g-*klas, dɛn kin ajɔst di gɔta dɛn na ɔl tu di say dɛn.

.colwit .g-3gɔta dɛn
.colwit .g-3gɔta dɛn
.colwit .g-3gɔta dɛn
.colwit .g-3gɔta dɛn
.colwit .g-3gɔta dɛn
.colwit .g-3gɔta dɛn

Kɔntena dɛn

Atikul klas dɛn we dɛn ad na Bootstrap v4.4 alaw kɔntena dɛn we gɛt 100% waid te wan patikyula brekpɔynt. v5 ad wan nyu xxlbrekpoint.

.kɔntinɛnt
.kɔntinɛnt-sm
.kɔntinɛnt-md
.kɔntinɛnt-lg
.kɔntinɛnt-xl
.kɔntinɛnt-xxl
.kɔntinɛnt-fluid