Foarbylden fan bootstrap-grid

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

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
.col-md-4
.col-md-4

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-6
.col-md-4

Mixed: mobyl en buroblêd

It Bootstrap 3-rastersysteem hat fjouwer lagen fan klassen: xs (tillefoans), sm (tablets), md (buroblêden), en lg (gruttere buroblêden). Jo kinne hast elke kombinaasje fan dizze klassen brûke om mear dynamyske en fleksibele yndielingen te meitsjen.

Eltse tier fan klassen skaalfergrutting, wat betsjut dat as jo fan plan binne deselde breedtes foar xs en sm yn te stellen, moatte jo allinich xs opjaan.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixed: mobyl, tablet en buroblêd

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Column clearing

Dúdlike driuwers op spesifike brekpunten om ûnhandige ynpakken te foarkommen mei unjildige ynhâld.

.col-xs-6 .col-sm-3
Feroarje de grutte fan jo viewport of kontrolearje it op jo tillefoan foar in foarbyld.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, en pull resets

Reset offsets, triuwt en lûkt op spesifike brekpunten.

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