Bootstrap 4 Schnellstart – Farben
Farben in Bootstrap sind nicht nur für die Optik zuständig. Jede Farbe bringt eine Bedeutung mit, weswegen man in Bootstrap nicht mit Farbnamen, sondern mit deren Bedeutung arbeitet.
Es gibt neben dem Standard 13 Farbunterscheidungen in Bootstrap. Für individuellere Farbanpassungen, ist man gezwungen sich Hexcodes (#FFFFFF) oder HTML-Farben zuzuwenden.
Die Farben verwendet man in fast allen Komponenten von Bootstrap gleich.
Ändern wir bspw. die Farbe eines Buttons:
<a class="btn btn-primary" href="#" role="button">Klick mich!</a>
Die Klasse btn-primary setzt den Farbwert des Buttons auf die Primärfarbe, welche im Standard-Theme von Bootstrap blau ist.
Folgende Farbgebung ist standardmäßig möglich:
| Name/Bedeutung | Farbe im Standard | Klassenerweiterung |
| Primärfarbe | blau | -primary |
| Sekundärfarbe | grau | -secondary |
| Erfolg | grün | -success |
| Gefahr/Fehler | rot | -danger |
| Warnung | orange | -warning |
| Information | Türkis | -info |
| Hell | Hell grau | -light |
| Dunkel | Dunkel grau | -dark |
| Farbe des HTML-Body | Wie body-Farbe | -body |
| Deaktiviert | grau | -muted |
| Weiß | Weiß | -white |
| Schwarz 50% | Grau | -black-50 |
| Weiß 50% | Grau | -white-50 |
Die Farben können an jede Komponente, die farblich gestaltet werden kann angehangen werden.
Text
Die Textfarbe kann mit der Klasse text- und der passenden Farbe, z.B. text-success geändert werden:
<p><a href="#" class="text-success">Das war erfolgreich!</a></p>
Hintergrund
Jedes Element kann die Hintergrundfarbe mit der Klasse bg- und der passenden Farbe ändern:
<div class="bg-info">Allgemeine Information.</div>
Farben in Komponenten
Folgende Bootstrap Komponenten können farblich gestaltet werden. Wie es funktioniert siehst du in den jeweiligen Lektionen der letzten Module. Dort wurde der Einfachheit halber immer die primary-Farbe verwendet. Du musst die primary-Farbe nur gegen die gewünschte Farbe austauschen. Schon siehst du eine andere Farbe.
- Hintergrundfarbe
- Tabellenzeilen und -zellen
- Buttons
- Text
- Alerts
- Progress
- Badges
- Spinner
In der Bootstrap-Dokumentation gibt es weitere Komponenten, die farblich gestaltet werden können.
Jetzt probiere dieses Farbspektakel selbst aus: