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

## Responsive Bilder
Responsive Bilder sind unerlässlich. Mit der Bootstrap-Klasse `img-fluid` ist dies einfach umzusetzen. Wenden Sie sie auf jedes `<img>`-Element an, und das Bild passt sich automatisch der Größe des Viewports an. So wird eine optimale Skalierung und ein konsistentes Layout auf allen Geräten und Bildschirmgrößen gewährleistet.

## Bild-Thumbnails
Thumbnails verleihen Ihrer Webseite ein professionelles und elegantes Erscheinungsbild. Die Bootstrap-Klasse `img-thumbnail` sorgt mit abgerundeten Ecken und dezenten Rahmen für ein sauberes und einheitliches Aussehen.

## Bildformen
Warum sich mit langweiligen rechteckigen Bildern zufriedengeben, wenn Sie mehr Persönlichkeit einbringen können? Bootstrap bietet Klassen zur Formgebung von Bildern, darunter:
- `rounded`: Weiche Kanten mit abgerundeten Ecken für einen sanften Effekt;
- `rounded-circle`: Perfekt runde Bilder für einen harmonischen Eindruck;
- `rounded-pill`: Pillenförmige Bilder für einen modernen und eleganten Look.



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

Erkunden Sie die grundlegenden Prinzipien des Bootstrap CSS-Frameworks und entdecken Sie die Geheimnisse zur schnellen und effizienten Erstellung responsiver und optisch ansprechender Websites. Durch praktische Anwendung der wichtigsten Utilities und leistungsstarken Komponenten erwerben Sie wertvolle Erfahrungen, um Ihren Webentwicklungsprozess mit dem vielseitigen Toolkit von Bootstrap zu optimieren.

Erkunden Sie das Wesen von Bootstrap und seine Entwicklung von den Anfängen bis zur Gegenwart, bewerten Sie Vorteile und Nachteile und verstehen Sie die Voraussetzungen für eine effektive Implementierung.

Übersicht über die Installationsoptionen von Bootstrap. Auswahl zwischen schneller Integration über Content Delivery Network (CDN) oder einer individuelleren Methode mit Node Package Manager (NPM).

Erwerb von Kenntnissen in zentralen Bootstrap-Elementen, einschließlich des vielseitigen Rastersystems, differenzierter Typografie, dynamischer Button-Nutzung, präziser Verwaltung von Abständen und Innenabständen sowie der Gestaltung effektiver Formulare für eine nahtlose Benutzerinteraktion.

Steigerung der Bootstrap-Kenntnisse durch fortgeschrittene Themen wie dynamische Navigationsmenüs, responsive Bildverarbeitung, vielseitige Kartenlayouts, interaktive Modals und ansprechende Karussells für fesselnde Nutzererlebnisse.

Erstellen Sie eine Portfolio-Website mit dem Bootstrap-Framework anhand unserer Anleitung. Nutzen Sie die leistungsstarken Funktionen von Bootstrap. Dieser praxisorientierte Abschnitt hilft dabei, Ihre Fähigkeiten, Projekte und Erfolge zu präsentieren.

Umgang mit Bildern in Bootstrap

Responsive Bilder

Bild-Thumbnails

Bildformen

Awesome!

Umgang mit Bildern in Bootstrap

Responsive Bilder

Bild-Thumbnails

Bildformen