In Bootstrap können mittels CSS-Klassen einfach Hintergrundfarben und Textfarben eingesetzt werden.
Du kannst diese Farben verwenden, um Text, Hintergründe und Randfarben für Elemente in deiner Webseite zu definieren.
Um diese Farben zu verwenden, genügt es die entsprechende Klasse zu dem Element hinzufügen.
Häufig verwendete Klasse sind:
-
text-primary- Diese Farbe ist die primäre Farbe des Frameworks und wird in der Regel für wichtige Aktionen verwendet. -
text-secondary- Diese Farbe ist die sekundäre Farbe des Frameworks und wird in der Regel für sekundäre Aktionen verwendet. -
text-success- Diese Farbe wird verwendet, um erfolgreiche Aktionen hervorzuheben. -
text-danger- Diese Farbe wird verwendet, um gefährliche oder fehlerhafte Aktionen hervorzuheben. -
text-warning- Diese Farbe wird verwendet, um Aktionen hervorzuheben, die Vorsicht erfordern. -
text-info- Diese Farbe wird verwendet, um zusätzliche Informationen oder Hilfe anzuzeigen. -
text-light- Diese Farbe wird verwendet, um einen hellen Hintergrund zu erzeugen. -
text-dark- Diese Farbe wird verwendet, um einen dunklen Hintergrund zu erzeugen.
Um statt der Textfarbe die Hintergrundfarbe anzupassen, schreibst du einfach "bg-primary" statt "text-primary" für eine blaue Hintergrundfarbe.
Das funktioniert auch bei Buttons und zwar mit "btn-primary".
<p class="text-primary">Dieser Text ist blau</p>
<div class="bg-success">Dieser Bereich hat einen grünen Hintergrund</div>
<button class="btn btn-danger">Roter Button</div>