Farben
Durch die ausgeklügelte Farben-Logik von Bootstrap 5 kann die komplette Webseite mit wenigen Farben gestaltet werden. Bootstrap 5 generiert automatisch Abstufungen und Varianten.
Weitere Farben können unbegrenzt zugefügt werden.
Alle Farben stehen Ihnen im Backend als Auswahl zur Verfügung.
| Beschreibung | Beispiel | Bereich |
|---|---|---|
|
Body — Grundfarben. |
|
Globale Textfarbe |
|
Globale Hintergrundfarbe |
||
|
Primary — Hauptfarbe für Links, Fokus und Aktive Formular-Elemente. Auch die Standard-Farbe für Überschriften und Buttons. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
|
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |
|
|
Success — Für positive Bestätigungen. Zum beispiel der Hinweis nach dem absenden eines Formulars. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
|
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |
|
|
Danger — Für negative Bestätigungen oder Fehler. Zum beispiel der Hinweis nach dem absenden eines Formulars das ein pflichtfeld leer ist. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
|
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |
|
|
Warning — Warnung oder Warnhinweise. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
|
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |
|
|
Info — Informationshinweise. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
||
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |
|
|
Light — Globale, helle Farbe für Schriften oder Hintergründe. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
||
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |
|
|
Dark — Globale, dunkle Farbe für Schriften oder Hintergründe. |
Schrift- oder Elementfarbe |
|
|
Abgedämpfte Farbe für Hintergründe, Badges, Alerts oder kleine UI‑Hinweise (automatisch generiert) |
||
|
Abgedämpfte Rahmen-Farbe für fokusierte Eingabefelder oder aktive Akkordion-Elemente (automatisch generiert) |
||
Text |
Farb-Variante für stärkeren Kontrast (automatisch generiert) |