Bootstrap 4 Farben

Text Farben

Bootstrap 4 hat einige Kontext-bezogene Klassen, die verwendet werden können, um "Bedeutung durch Farben" zu liefern.

Die Klassen für Text-Farben sind: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (Standart Body-Farbe/meistens black) and .text-light

Beispiel:

Das ist ein Text mit der Klasse text-muted ist wichtig.

Das ist ein Text mit der Klasse text-primary ist primär.

Das ist ein Text mit der Klasse text-success hat Erfolg.

Das ist ein Text mit der Klasse text-info liefert Information.

Das ist ein Text mit der Klasse text-warning ist eine Warnung.

Das ist ein Text mit der Klasse text-danger setze ein Achtungszeichen.

Das ist ein Text mit der Klasse text-secondary ist ein sekundärer Text.

Das ist ein Text mit der Klasse text-dark ist ein dunkler Text.

Das ist ein Text mit der Klasse text-Body ist der Standarttext.

Das ist ein Text mit der Klasse text-light ist hellgrau.

Kontext-bezogene Textklassen können auch für Links verwendet werden, die eine dunklere Hover-Farbe hinzufügen:

Man kann auch 50% Deckkraft für schwarzen oder weißen Text mit den Klassen .text-black-50 oder .text-white-50 hinzufügen:

Beispiel:

Black text with 50% opacity on white background

White text with 50% opacity on black background

Hintergrund-Farben

Die Klassen für Hintergrundfarben sind: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark und .bg-light.

Zu beachten ist, dass Hintergrundfarben die Textfarbe nicht festlegen, es kann in manchen Fällen aber diese zusammen mit einer .text- * Klasse verwendet werden.

Beispiel

Das ist der Text mit der Klasse text-muted ist wichtig.

Das ist der Text mit der Klasse text-primary ist primär.

Das ist der Text mit der Klasse text-success hat Erfolg.

Das ist der Text mit der Klasse text-info liefert Information.

Das ist der Text mit der Klasse text-warning ist eine Warnung.

Das ist der Text mit der Klasse text-danger setze ein Achtungszeichen.

Das ist der Text mit der Klasse text-secondary ist ein sekundärer Text.

Das ist der Text mit der Klasse text-dark ist ein dunkler Text.

Das ist der Text mit der Klasse text-Body ist der Standarttext.

Das ist der Text mit der Klasse text-light ist hellgrau.

Button Farben

In Bootstrap 4 kann man auch Kontext-bezogene Klassen den Button zuorden

Farben für DIV's

Es kann auch die Hintergrundfarbe von Div's geändert werden mit den Klassen .bg-***

Das ist Div-Container mit der Klasse text-muted ist wichtig.
Das ist Div-Container mit der Klasse text-primary ist primär.
Das ist Div-Container mit der Klasse text-success hat Erfolg.
Das ist Div-Container mit der Klasse text-info liefert Information.
Das ist Div-Container mit der Klasse text-warning ist eine Warnung.
Das ist Div-Container mit der Klasse text-danger setze ein Achtungszeichen.
Das ist Div-Container mit der Klasse text-secondary ist ein sekundärer Text.
Das ist Div-Container mit der Klasse text-dark ist ein dunkler Text.
Das ist Div-Container mit der Klasse text-Body ist der Standarttext.
Das ist Div-Container mit der Klasse text-light ist hellgrau.