📐 Layout & Grid
Bootstrap 12-kolonne grid
col-12 (fuld bredde)
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-8
col-4
Responsivt grid (resize vinduet for at se effekten)
Boks 1
12 → 6 → 4 → 3
12 → 6 → 4 → 3
Boks 2
12 → 6 → 4 → 3
12 → 6 → 4 → 3
Boks 3
12 → 6 → 4 → 3
12 → 6 → 4 → 3
Boks 4
12 → 6 → 12 → 3
12 → 6 → 12 → 3
Flexbox-hjælpeklasser
justify-content-start
1
2
3
justify-content-center
1
2
3
justify-content-between
1
2
3
align-items-center (forskellig højde)
Høj
Normal
Højere
Spacing — margin og padding
Padding (p-0 til p-5)
p-0
p-1
p-2
p-3
p-4
p-5
Margin (m-0 til m-5)
m-0
m-1
m-2
m-3
m-4
m-5
Typiske side-layouts
Sidebar + Indhold (col-3 / col-9)
Sidebar
- Menu punkt 1
- Menu punkt 2
- Menu punkt 3
Hoved-indhold
Her vises primært indhold. Denne kolonne er 9/12 af skærmens bredde.
Header / Indhold / Footer (sticky layout)
Header (navbar)
Hoved-indhold (flex-grow-1 / min-height)
Footer