Bootstrap 4 Schnellstart – Bilder
Bilder
Dieser Abschnitt ist deshalb so wichtig, da sich fast jeder schonmal mit Bildern auf einer mobilen Seite herumgeärgert hat.
Die wichtigste Klasse ist img-fluid. Diese Klasse macht das Bild responsive.
<img src="produkt.png" class="img-fluid">
Solltest du mal eine Vorschau für ein Bild erstellen wollen, kannst du die Klasse img-thumbnail verwenden. Damit wird das Bild als Vorschaubild gezeigt.
<img src="produkt.png" class="img-thumbnail">
Kleinere Bilder können auch horizontal ausgerichtet werden. Wie das geht, verrät dir folgende Tabelle:
| Ausrichtung | Klasse |
| Links | float-left |
| Zentriert | mx-auto d-block |
| Rechts | float-right |
Ein kleines visuelles Gimmick sind abgerundete Ecken in Bildern. Diese kannst du mit der Klasse rounded nutzen. Hier ein Beispiel zusammen mit einer links-Ausrichtung:
<img src="produkt.jpg" class="float-left rounded">
Viel Spaß beim Ausprobieren in der Übung: