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.
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
<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>
<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>
Ɔrizɔntal alaynɛshɔn
<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>
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.
Sins 9 + 4 = 13 > 12, dis 4-kכlכm-wayd div de gεt rap pan nyu layn as wan kכntigyu yunit.
Di kɔlɔm dɛn we de kam afta dat kɔntinyu fɔ de along di nyu layn.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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 .row
s, bɔt nɔto ɔl implimɛnt mɛtɔd kin akɔn fɔ dis.
<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>
Yu kin yuz dis brek bak na sɔm patikyula brekpoint dɛn wit wi rispɔnsiv displei yutiliti dɛn .
<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>
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. Dɛn klas ya de ansa, so yu kin sɛt di order
bay brekpɔynt (ɛgz., .order-1.order-md-2
). Inklud sɔpɔt fɔ 1
tru 5
akɔdin to ɔl di siks grid taya dɛn.
<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>
I gɛt bak rispɔnsiv .order-first
ɛn .order-last
klas 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.
<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>
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-4
i de muv .col-md-4
oba 4 kɔlɔm dɛn.
<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>
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 .
<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 yutiliti dɛn
Wit di muv to flexbox in v4, yu kin yuz margin utilities laik .me-auto
fo fos sibling kolm away from wan anoda.
<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>
Standalone kɔlɔm klas dɛn
Di .col-*
klas dɛn kin yuz bak ausayd a .row
fɔ gi wan ɛlimɛnt wan patikyula wit. Ɛnitɛm we dɛn yuz kɔlɔm klas dɛn as nɔ dairekt pikin dɛn fɔ wan row, dɛn kin pul di padding dɛn.
<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 .clearfix
wrap 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 fayn fayn wan rap 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.
<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>