Eksempler på bootstrap-gitter

Grundlæggende gitterlayouts for at gøre dig fortrolig med at bygge i Bootstrap-gittersystemet.

I disse eksempler er .themed-grid-colklassen tilføjet til kolonnerne for at tilføje nogle temaer. Dette er ikke en klasse, der er tilgængelig i Bootstrap som standard.

Fem gitterniveauer

Der er fem niveauer til Bootstrap-gittersystemet, en for hver række af enheder, vi understøtter. Hvert niveau starter ved en minimum viewport-størrelse og gælder automatisk for de større enheder, medmindre de tilsidesættes.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tre lige store kolonner

Få tre kolonner med lige bredde, startende ved desktops og skalering til store desktops . På mobile enheder, tablets og derunder vil kolonnerne automatisk stables.

.col-md-4

Tre lige store kolonner alternativ

Ved at bruge .row-cols-*klasserne kan du nemt oprette et gitter med lige store kolonner.

.colbarn af .row-cols-md-3

Tre ulige søjler

Få tre kolonner, der starter ved desktops og skalerer til store desktops i forskellige bredder. Husk, at gitterkolonner skal lægge op til tolv for en enkelt vandret blok. Mere end det, og kolonner begynder at stables uanset visningsporten.

.col-md-3

.col-md-6

.col-md-3

To kolonner

Få to kolonner, der starter ved desktops og skalerer til store desktops .

.col-md-8

.col-md-4

Fuld bredde, enkelt søjle

Ingen gitterklasser er nødvendige for elementer i fuld bredde.

To kolonner med to indlejrede kolonner

I henhold til dokumentationen er indlejring let - bare sæt en række kolonner i en eksisterende kolonne. Dette giver dig to kolonner, der starter ved skriveborde og skalerer til store skriveborde med yderligere to (lige bredder) i den større kolonne.

På mobilenhedsstørrelser, tablets og nedefter, stables disse kolonner og deres indlejrede kolonner.

.col-md-8

.col-md-6

.col-md-4

Blandet: mobil og desktop

Bootstrap v4-gittersystemet har fem klasser: xs (ekstra lille, denne klasseinfix bruges ikke), sm (lille), md (medium), lg (stor) og xl (ekstra stor). Du kan bruge næsten enhver kombination af disse klasser til at skabe mere dynamiske og fleksible layouts.

Hvert niveau af klasser skaleres op, hvilket betyder, at hvis du planlægger at indstille de samme bredder for md, lg og xl, behøver du kun at angive md.

.col-md-8

.col-6 .col-md-4

.col-6

Blandet: mobil, tablet og desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Tagrender

Med .gx-*klasser kan de vandrette tagrender justeres.

.colmed .gx-4tagrender

Brug .gy-*klasserne til at styre de lodrette tagrender.

.colmed .gy-4tagrender

Med .g-*klasser kan tagrenderne i begge retninger justeres.

.colmed .g-3tagrender

Containere

Yderligere klasser tilføjet i Bootstrap v4.4 tillader containere, der er 100 % brede indtil et bestemt brudpunkt. v5 tilføjer et nyt xxlbrudpunkt.

.beholder

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-væske