Summary  
This chapter explains how to apply Bootstrap’s predefined CSS utility classes (e.g., img-fluid, img-thumbnail, rounded, rounded-circle, rounded-pill) to images for responsive scaling, consistent styling, and custom shapes.  

General domain of usage  
Front-end web development

## Responsivt billede
Responsivt billede er afgørende. Bootstraps `img-fluid`-klasse gør det nemt. Anvend den på ethvert `<img>`-element, og billedet tilpasser sig visningens størrelse, hvilket sikrer korrekt skalering og ensartede layouts på tværs af alle enheder og skærmstørrelser.

## Billedminiaturer
Miniaturebilleder tilføjer et poleret og elegant udtryk til din websides udseende. Bootstraps `img-thumbnail`-klasse giver afrundede hjørner og diskrete kanter for et rent og ensartet udtryk.

## Billedformer
Undgå kedelige rektangulære billeder og tilføj personlighed. Bootstrap tilbyder klasser til at forme billeder, herunder:
- `rounded`: Blødgør kanterne med afrundede hjørner for et blidt udtryk;
- `rounded-circle`: Skab perfekt runde billeder;
- `rounded-pill`: Skab moderne, pilleformede billeder for et strømlinet udseende.



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+SW1hZ2VzIEV4YW1wbGUgMTwvdGl0bGU+CiAgICA8bGluawogICAgICBocmVmPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2Nzcy9ib290c3RyYXAubWluLmNzcyIKICAgICAgcmVsPSJzdHlsZXNoZWV0IgogICAgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8IS0tIFJlc3BvbnNpdmUgSW1hZ2UgLS0+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy80MzMzYWIxZi0wYTcyLTQzMWMtYjlkMC03M2E3NTkyNzM5ZDQvc2VjdGlvbi00L2V4YW1wbGUtaW1hZ2UucG5nIgogICAgICBjbGFzcz0iaW1nLWZsdWlkIgogICAgICBhbHQ9IlJlc3BvbnNpdmUgSW1hZ2UiCiAgICAvPgoKICAgIDwhLS0gVGh1bWJuYWlsIEltYWdlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNDMzM2FiMWYtMGE3Mi00MzFjLWI5ZDAtNzNhNzU5MjczOWQ0L3NlY3Rpb24tNC9leGFtcGxlLWltYWdlLnBuZyIKICAgICAgY2xhc3M9ImltZy10aHVtYm5haWwiCiAgICAgIGFsdD0iVGh1bWJuYWlsIEltYWdlIgogICAgLz4KCiAgICA8IS0tIENpcmN1bGFyIEltYWdlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNDMzM2FiMWYtMGE3Mi00MzFjLWI5ZDAtNzNhNzU5MjczOWQ0L3NlY3Rpb24tNC9leGFtcGxlLWltYWdlLnBuZyIKICAgICAgY2xhc3M9InJvdW5kZWQtY2lyY2xlIgogICAgICBhbHQ9IkNpcmN1bGFyIEltYWdlIgogICAgLz4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Udforsk de grundlæggende principper i Bootstrap CSS-rammeværket og få indsigt i, hvordan du hurtigt og effektivt kan skabe responsive og visuelt imponerende websites. Gennem praktisk udforskning af nøglefunktioner og implementering af kraftfulde komponenter opnår du værdifuld erfaring, der optimerer din webudviklingsproces med Bootstraps alsidige værktøjssæt.

Udforsk essensen af Bootstrap og dets udvikling fra begyndelsen til i dag, vurder dets fordele og ulemper, og forstå forudsætningerne for effektiv implementering.

Gennemgå installationsmulighederne for Bootstrap. Vælg mellem hurtig integration via Content Delivery Network (CDN) eller en mere tilpasset tilgang med Node Package Manager (NPM).

Opnå færdigheder i centrale Bootstrap-elementer, herunder det alsidige gitter-system, nuanceret typografi, dynamisk brug af knapper, præcis håndtering af marginer og polstring samt udformning af effektive formularer for problemfri brugerinteraktion.

Forbedr dine Bootstrap-færdigheder med avancerede emner, der dækker dynamiske navigationsmenuer, responsiv billedhåndtering, alsidige kortlayouts, interaktive modaler og engagerende karuseller for fængende brugeroplevelser.

Opret et porteføljewebsite ved hjælp af Bootstrap-rammeværket med vores vejledning. Udnyt de avancerede funktioner i Bootstrap. Dette praktiske afsnit hjælper med at fremvise dine færdigheder, projekter og resultater.

Håndtering af Billeder i Bootstrap

Responsivt billede

Billedminiaturer

Billedformer

Awesome!

Håndtering af Billeder i Bootstrap

Responsivt billede

Billedminiaturer

Billedformer