Foarbylden fan bootstrap-grid

Basisraster-yndielingen om jo fertroud te meitsjen mei it bouwen binnen it Bootstrap-rastersysteem.

Yn dizze foarbylden .themed-grid-colwurdt de klasse tafoege oan 'e kolommen om wat tema's ta te foegjen. Dit is gjin klasse dy't standert beskikber is yn Bootstrap.

Fiif raster tiers

D'r binne fiif lagen foar it Bootstrap-rastersysteem, ien foar elk berik fan apparaten dy't wy stypje. Elke tier begjint op in minimale viewportgrutte en jildt automatysk foar de gruttere apparaten, útsein as oerskreaun.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Trije gelikense kolommen

Krij trije kolommen mei deselde breedte, begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden . Op mobile apparaten, tablets en hjirûnder sille de kolommen automatysk steapele wurde.

.col-md-4

Trije gelikense kolommen alternatyf

Troch de .row-cols-*klassen te brûken, kinne jo maklik in raster meitsje mei gelikense kolommen.

.colbern fan .row-cols-md-3

Trije ûngelikense kolommen

Krij trije kolommen begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden fan ferskate breedtes. Unthâld dat rasterkolommen oant tolve moatte optelle foar ien horizontaal blok. Mear dan dat, en kolommen begjinne te stapeljen, nettsjinsteande de viewport.

.col-md-3

.col-md-6

.col-md-3

Twa kolommen

Krij twa kolommen begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden .

.col-md-8

.col-md-4

Folsleine breedte, inkele kolom

Gjin rasterklassen binne nedich foar eleminten mei folsleine breedte.

Twa kolommen mei twa nestele kolommen

Neffens de dokumintaasje is nesting maklik - pleats gewoan in rige kolommen yn in besteande kolom. Dit jout jo twa kolommen begjinnend by buroblêden en skaalfergrutting nei grutte buroblêden , mei noch twa (lykweardige breedtes) binnen de gruttere kolom.

By mobyl apparaatgrutte, tablets en del, sille dizze kolommen en har nestele kolommen steapele wurde.

.col-md-8

.col-md-6

.col-md-4

Mixed: mobyl en buroblêd

It Bootstrap v5-rastersysteem hat seis lagen fan klassen: xs (ekstra lyts, dizze klasse-ynfix wurdt net brûkt), sm (lyts), md (medium), lg (grut), xl (x-grut), en xxl (xx) -grut). Jo kinne hast elke kombinaasje fan dizze klassen brûke om mear dynamyske en fleksibele yndielingen te meitsjen.

Eltse tier fan klassen skaal omheech, wat betsjuttet dat as jo fan plan binne deselde breedtes yn te stellen foar md, lg, xl en xxl, moatte jo allinich md opjaan.

.col-md-8

.col-6 .col-md-4

.col-6

Mixed: mobyl, tablet en buroblêd

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Gutters

Mei .gx-*klassen kinne de horizontale goaten oanpast wurde.

.colmei .gx-4goaten

Brûk de .gy-*klassen om de fertikale goaten te kontrolearjen.

.colmei .gy-4goaten

Mei .g-*klassen kinne de goaten yn beide rjochtingen oanpast wurde.

.colmei .g-3goaten

Containers

Oanfoljende klassen tafoege yn Bootstrap v4.4 tastean konteners dy't 100% breed oant in bepaald brekpunt. v5 foeget in nij xxlbrekpunt ta.

.kontener

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid