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

## Responsiv bild
Responsiva bilder är avgörande. Bootstraps `img-fluid`-klass gör det enkelt. Applicera den på valfritt `<img>`-element så anpassas bilden efter visningsfönstrets storlek, vilket säkerställer perfekt skalning och konsekventa layouter på alla enheter och skärmstorlekar.

## Bildminiatyrer
Miniatyrbilder ger ett polerat och elegant intryck på webbplatsens utseende. Bootstraps `img-thumbnail`-klass ger rundade hörn och subtila ramar för ett rent och enhetligt utseende.

## Bildformer
Varför nöja sig med tråkiga rektangulära bilder när du kan lägga till lite personlighet? Bootstrap erbjuder klasser för att forma bilder, inklusive:
- `rounded`: Mjuka upp kanterna med rundade hörn för en mild känsla;
- `rounded-circle`: Skapa helt runda bilder för ett cirkulärt utseende;
- `rounded-pill`: Skapa avlånga, kapselliknande bilder för ett modernt och stilrent intryck.



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

Utforska grundläggande principer för Bootstrap CSS-ramverket och lås upp hemligheterna bakom att snabbt och effektivt skapa responsiva och visuellt tilltalande webbplatser. Genom praktisk utforskning av viktiga verktyg och implementering av kraftfulla komponenter får du ovärderlig praktisk erfarenhet för att effektivisera ditt webbutvecklingsflöde med Bootstraps mångsidiga verktygslåda.

Fördjupa dig i kärnan av Bootstrap och dess resa från tillkomst till nutid, väg dess fördelar och nackdelar samt förstå förutsättningar för effektiv implementering.

Navigera bland installationsalternativ för Bootstrap. Välj mellan snabb integration via Content Delivery Network (CDN) eller en mer anpassad metod med Node Package Manager (NPM).

Fördjupa dig i centrala Bootstrap-element, inklusive det mångsidiga rutnätsystemet, nyanserad typografi, dynamisk knappanvändning, exakt hantering av marginaler och utfyllnader samt utformning av effektiva formulär för smidig användarinteraktion.

Förbättra dina Bootstrap-kunskaper med avancerade ämnen som omfattar dynamiska navigationsmenyer, responsiv bildhantering, mångsidiga kortlayouter, interaktiva modaler och engagerande karuseller för fängslande användarupplevelser.

Skapa en portfoliosida med hjälp av Bootstrap-ramverket med vår vägledning. Utnyttja de kraftfulla funktionerna i Bootstrap. Denna praktiska sektion hjälper dig att visa upp dina färdigheter, projekt och prestationer.

Hantering av Bilder i Bootstrap

Responsiv bild

Bildminiatyrer

Bildformer

Awesome!

Hantering av Bilder i Bootstrap

Responsiv bild

Bildminiatyrer

Bildformer