Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Grid
Det fælles designsystem benytter et simpelt mobile-first flexbox grid til opbygning af sider. Grid-systemet er et standard 12-kolonne system med fem responsive breakpoints.
Grid-systemet bruger containere, rækker og kolonner til at opbygge sider. Grid-systemet bruger flexbox og er responsivt. Nedenfor kan du se eksempler på brugen af grid-systemet.
Installation
HTML Struktur
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>Indstillinger
Grid systemet har følgende standardindstillinger:
| Ekstra lille <576px |
Lille ≥576px |
Mellem ≥768px |
Stor ≥992px |
Ekstra stor ≥1200px |
|
|---|---|---|---|---|---|
| Max. container bredde | None (auto) | None (auto) | None (auto) | None (auto) | 1200px |
| Klasser | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Antal kolonner | 12 | ||||
| Afstand mellem kolonner (Gutter) | 32px (16px på hver side af en kolonne) | ||||
| Kan indlejres | Ja - man kan godt have rækker inde i en kolonne | ||||
| Ændre kolonners rækkefølge | Ja | ||||
Responsive klasser
Som udgangspunkt findes der 5 breakpoints: extra small, small, medium, large, or extra large.
Klasser som rammer alle breakpoints
Brug klassen .col eller .col-* uden responsivt prefix (fx. md).
Fra stablede kolonner til kolonner på række
Ved at bruge fx .col-md-* klassen vil kolonnerne til at begynde med være placeret lodret over hinanden på mobile enheder. Fra medium-skærme vil de være vist vandret på en række.
Brug af forskellige kolonne-klasser
Du kan mikse forskellige kolonne-klasser.
Kolonneombrydning
Hvis der er mere end 12 kolonner på en række, vil ekstra kolonner blive vist på en ny linje under de første 12.
9 + 4 = 13 > 12, det betyder at denne 4-kolonne div bliver vist på en nye linie
Efterfølgende kolonner fortsætter på denne nye linie
Indlejre
Du kan indlejre flere rækker med tilhørende kolonner i hinanden.
Ingen afstand mellem kolonner (ingen gutter)
Du kan fjerne mellemrum mellem kolonnerne ved at tilføje klassen no-gutters til rækken.
'Auto' og 'Fill' kolonner
Du kan specificere bredden på en kolonne uden at angive en eksplicit nummer-klasse som fx col-sm-6.
Specifik bredde på kun én kolonne
Du kan tildele alle kolonner samme bredde ved kun at give én kolonne en eksplicit bredde (.col-6). De øvrige kolonner tilpasser sig automatisk samme bredde.
Individuel kolonnebredde efter indhold
Ved at brug col-{breakpoint}-auto kan du skabe individuel kolonnebredde: Kolonnerne tilpasser sig til deres indhold.
Rækkefølge
Klasser (classes)
Brug klasserne .order- til at bestemme den visuelle rækkefølge af kolonnerne. Disse klasser findes også i responsive udgaver fx .order-1.order-md-2).
Forskyd kolonner
Brug klasserne .offset- til at forskyde kolonner, fx forskyder .offset-md-4 4 kolonner til højre.
Du kan nulstille forskydning ved fx at bruge klassen offset-md-0.
Hjælpeklasser
Designsystemet kommer med forskellige hjælpeklasser, fx. flex, margin og bredde. Du kan kombinere disse hjælpeklasser med grid-systemet.
Hjælpeklasser: Flexbox
Brug designsystemets flexbox hjælpeklasser til at ændre på placeringen af kolonnerne og placeringen af indholdet i kolonnerne.
Vertikal alignment
Horisontal alignment
Hjælpeklasser: Margin
Du kan bruge margin-hjælpeklasserne til at skabe indryk. Fx mr-auto.
Hjælpeklasser: Bredde
Vil du have rækker og kolonner som går fra kant til kant, skal du undlade .container eller tilføje klassen w-percent-100.