Bootstrap 4 Schnellstart – Ränder & Konturen
Hinzufügen
Du kannst einen dünnen Rand um ein Element hinzufügen, in dem Du die Klasse border verwendest. Möchtest Du den Rand genauer steuern, kannst Du folgende Klassen verwenden:
| Rand | Klasse |
| Oben, Unten, Links, Rechts | border |
| Oben | border-top |
| Unten | border-bottom |
| Links | border-left |
| Rechts | border-right |
<span class="border"></span>
Entfernen
Elemente, die einen Rand haben, kannst Du mit der Klasse border-0 randlos machen. Es gibt auch die Möglichkeit nur einzelne Ränder zu entfernen:
| Rand Entfernen | Klasse |
| Oben, Unten, Links, Rechts | border-0 |
| Oben | border-top-0 |
| Unten | border-bottom-0 |
| Links | border-left-0 |
| Rechts | border-right-0 |
Farbe
Wie man die Farben verwendet, wurde am Anfang des Moduls schon erklärt. Mit der Klasse border- kannst Du Ränder farblich gestalten.
<span class="border border-primary"></span>
Runde Ecken
Wer Bilder moderner darstellen möchte, kann die Ecken davon über folgende Klassen abrunden:
| Rundung | Klasse |
| Alle Ecken | rounded- |
| Oben | rounded-top |
| Unten | rounded-bottom |
| Links | rounded-left |
| Rechts | rounded-right |
| Kreis | rounded-circle |
| Pill | rounded-pill |
| Keine Rundung | rounded-0 |
Diese kann man zum Beispiel auf ein Bild setzen:
<img src="..." alt="..." class="rounded">
In dieser Übung kannst Du das Gelernte nochmal ausprobieren: