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 bilde
Responsivitet for bilder er avgjørende. Bootstraps `img-fluid`-klasse gjør dette enkelt. Bruk den på et hvilket som helst `<img>`-element, så tilpasses bildet automatisk til visningsvinduets størrelse, noe som sikrer korrekt skalering og konsistente oppsett på alle enheter og skjermstørrelser.

## Bilde-miniatyrer
Miniatyrbilder gir et profesjonelt og elegant preg på nettsidens utseende. Bootstraps `img-thumbnail`-klasse gir avrundede hjørner og subtile rammer for et ryddig og ensartet uttrykk.

## Bildesilhuetter
Det er ingen grunn til å nøye seg med kjedelige, rektangulære bilder når du kan tilføre litt personlighet. Bootstrap tilbyr klasser for å forme bilder, inkludert:
- `rounded`: Mykner kantene med avrundede hjørner for et mildt uttrykk;
- `rounded-circle`: Gir perfekt runde bilder;
- `rounded-pill`: Gir avlange, kapsel-formede bilder for et moderne og stilrent utseende.



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

Utforsk kjerneprinsippene i Bootstrap CSS-rammeverket og oppdag hemmelighetene bak å lage responsive og visuelt imponerende nettsteder raskt og effektivt. Gjennom praktisk utforskning av sentrale verktøy og implementering av kraftige komponenter, får du uvurderlig praktisk erfaring som effektiviserer arbeidsflyten i webutvikling ved hjelp av Bootstraps allsidige verktøykasse.

Utforsk kjernen i Bootstrap og dets utvikling fra oppstart til i dag, vurder fordeler og ulemper, og forstå forutsetninger for effektiv implementering.

Naviger gjennom alternativer for installasjon av Bootstrap. Velg mellom rask integrasjon via Content Delivery Network (CDN) eller en mer tilpasset tilnærming med Node Package Manager (NPM).

Oppnå ferdigheter i sentrale Bootstrap-elementer, inkludert det allsidige rutenettsystemet, nyansert typografi, dynamisk bruk av knapper, presis håndtering av marger og polstringer, samt utforming av effektive skjemaer for sømløs brukerinteraksjon.

Hev dine Bootstrap-ferdigheter med avanserte emner som dekker dynamiske navigasjonsmenyer, responsiv bildehåndtering, allsidige kortoppsett, interaktive modaler og engasjerende karuseller for fengende brukeropplevelser.

Lag en porteføljenettside ved hjelp av Bootstrap-rammeverket med vår veiledning. Utnytt de kraftige funksjonene i Bootstrap. Denne praktiske delen hjelper deg med å vise frem dine ferdigheter, prosjekter og prestasjoner.

Håndtering av Bilder i Bootstrap

Responsivt bilde

Bilde-miniatyrer

Bildesilhuetter

Awesome!

Håndtering av Bilder i Bootstrap

Responsivt bilde

Bilde-miniatyrer

Bildesilhuetter