Bootstrap 5 giver flere forudbyggede kortlayoutmuligheder til at skabe visuelt tiltalende og responsive indholdssektioner på dine websider. Her er trinene til at oprette Bootstrap 5-kortlayouts:
`-elementet med en klasse af `'card'`. Dette vil skabe den grundlæggende struktur for kortet.
```
```
* Du kan tilføje forskellige elementer inde i kortet, såsom billeder, tekst, knapper og andre komponenter.
2. Kortets titel og brødtekst:
* For at tilføje en titel til dit kort, brug klassen `'card-title'` i et `'h5'` eller `'h6'` element.
* På samme måde skal du bruge klassen `'card-body'` til at pakke indholdet af kortet, som kan omfatte afsnit, lister og andre elementer.
```
Kortindhold kommer her...
```
3. Korthoved og sidefod:
* Du kan tilføje en korthoved ved at bruge klassen `'card-header'` og en kortsidefod ved at bruge klassen `'card-footer'`. Disse elementer vises henholdsvis øverst og nederst på kortet.
```
Nogle hurtige eksempeltekster til at bygge kortets titel og gøre kortets indhold.
```
4. Kortbillede:
* For at inkludere et billede på dit kort, brug klassen `'card-img-top'` eller `'card-img-bottom'`. Disse klasser placerer billedet øverst eller nederst på kortet.
```
Kortindhold kan placeres her...
```
5. Kort med billede og tekst:
* Kombiner billed- og tekstkortlayouterne for at skabe kort, der indeholder både et billede og tekstindhold.
```
Korttitel
Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.
```
6. Vandret kort:
* Brug klassen "kort-horisontal" til at skabe horisontale kortlayouts. Vandrette kort er især nyttige til at vise indhold i et gitterbaseret layout.
```
Korttitel
Kortindhold kommer her...
```
7. Kortgrupper:
* For at gruppere flere kort sammen, pak dem ind i et `
`-element med klassen `'card-group'`. Dette skaber et visuelt forbundet sæt kort, der reagerer passende på forskellige skærmstørrelser.
```
```
Bootstrap 5 giver mange andre tilpasningsmuligheder for kortlayout, såsom tilføjelse af rammer, baggrunde, tekstfarver og mere. Se den officielle Bootstrap-dokumentation for en omfattende liste over muligheder og eksempler.
