Primjeri mreže za pokretanje

Osnovni rasporedi mreže koji će vas upoznati sa građenjem unutar Bootstrap grid sistema.

U ovim primjerima .themed-grid-colklasa je dodana u kolone kako bi se dodala neka tema. Ovo nije klasa koja je podrazumevano dostupna u Bootstrapu.

Pet nivoa mreže

Bootstrap grid sistem ima pet nivoa, po jedan za svaki opseg uređaja koje podržavamo. Svaki nivo počinje od minimalne veličine okvira za prikaz i automatski se primjenjuje na veće uređaje osim ako se ne poništi.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tri jednake kolone

Nabavite tri kolone jednake širine počevši od desktopa i skalirajući do velikih desktopa . Na mobilnim uređajima, tabletima i ispod, kolone će se automatski slagati.

.col-md-4

Tri jednake kolone alternativa

Koristeći .row-cols-*klase, možete lako kreirati mrežu sa jednakim kolonama.

.coldijete od .row-cols-md-3

Tri nejednake kolone

Nabavite tri kolone počevši od desktopa i skalirajte do velikih desktopa različitih širina. Zapamtite, broj stupaca mreže treba da iznosi do dvanaest za jedan horizontalni blok. Više od toga, kolone se počinju slagati bez obzira na okvir prikaza.

.col-md-3

.col-md-6

.col-md-3

Dvije kolone

Nabavite dvije kolone počevši od desktopa i skalirajte do velikih desktopa .

.col-md-8

.col-md-4

Puna širina, jedna kolona

Za elemente pune širine nisu potrebne mrežne klase.

Dvije kolone sa dvije ugniježđene kolone

Prema dokumentaciji, ugniježđenje je jednostavno – samo stavite red kolona unutar postojeće kolone. Ovo vam daje dvije kolone počevši od desktopa i skaliraju do velikih desktopa , s još dvije (jednake širine) unutar veće kolone.

Na veličinama mobilnih uređaja, tableta i manje, ove kolone i njihove ugniježđene kolone će se slagati.

.col-md-8

.col-md-6

.col-md-4

Mješovito: mobilni i desktop

Mrežni sistem Bootstrap v5 ima šest nivoa klasa: xs (ekstra mali, ovaj infiks klase se ne koristi), sm (mali), md (srednji), lg (veliki), xl (x-large) i xxl (xx -veliko). Možete koristiti gotovo bilo koju kombinaciju ovih klasa da kreirate dinamičnije i fleksibilnije rasporede.

Svaki nivo klasa se povećava, što znači da ako planirate postaviti iste širine za md, lg, xl i xxl, trebate samo navesti md.

.col-md-8

.col-6 .col-md-4

.col-6

Mješovito: mobilni, tablet i desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Oluci

Sa .gx-*klasama se horizontalni oluci mogu podesiti.

.colsa .gx-4olucima

Koristite .gy-*klase za kontrolu vertikalnih oluka.

.colsa .gy-4olucima

Kod .g-*klasa se mogu podesiti oluci u oba smjera.

.colsa .g-3olucima

Kontejneri

Dodatne klase dodane u Bootstrap v4.4 dozvoljavaju kontejnere koji su 100% široki do određene tačke prekida. v5 dodaje novu xxltačku prekida.

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.kontejner-tečnost