Bootstrap – Variablen für Farben & Schriften

1. Bootstrap Farbvariablen --bs-*

Alle Hauptfarben stehen als --bs-<name> und als RGB-Tripel --bs-<name>-rgb zur Verfügung.

Variable	RGB-Variable	Farbe
--bs-primary	--bs-primary-rgb	#0d6efd
--bs-secondary	--bs-secondary-rgb	#6c757d
--bs-success	--bs-success-rgb	#198754
--bs-danger	--bs-danger-rgb	#dc3545
--bs-warning	--bs-warning-rgb	#ffc107
--bs-info	--bs-info-rgb	#0dcaf0
--bs-light	--bs-light-rgb	#f8f9fa
--bs-dark	--bs-dark-rgb	#212529
--bs-body-color	--bs-body-color-rgb	Textfarbe der Seite
--bs-body-bg	--bs-body-bg-rgb	Hintergrundfarbe der Seite

2. Farbvariablen im eigenen CSS nutzen

Mit var(--bs-primary) etc. lassen sich Bootstrap-Farben in beliebigen Regeln verwenden:

--bs-primary

--bs-secondary

--bs-success

--bs-danger

--bs-warning

--bs-info

RGB-Variablen ermöglichen auch transparente Farben mit rgba():

rgba(--bs-primary-rgb, 0.15)

rgba(--bs-danger-rgb, 0.15)

rgba(--bs-success-rgb, 0.15)

3. Bootstrap Schriftvariablen

Variable	Standardwert	Bedeutung
--bs-font-sans-serif	system-ui, -apple-system, Segoe UI …	Standard-Schriftfamilie der Seite
--bs-font-monospace	SFMono-Regular, Menlo, Monaco …	Schrift für `<code>`, `<pre>`
--bs-body-font-size	1rem	Schriftgröße der Seite
--bs-body-font-weight	400	Schriftgewicht der Seite
--bs-body-line-height	1.5	Zeilenabstand der Seite
--bs-heading-color	(inherit)	Farbe aller Überschriften
--bs-link-color	--bs-primary	Linkfarbe
--bs-link-hover-color	abgedunkelt	Linkfarbe beim Hover

var(--bs-font-sans-serif)

Das schnelle braune Schaf springt. AaBbCc 0123

var(--bs-font-monospace)

const msg = "Hallo Welt!"; // 0123

4. Eigene CSS-Variablen definieren

In :root lassen sich eigene Variablen anlegen und mit Bootstrap-Variablen mischen:

:root {
  --meine-farbe:        #7c3aed;
  --meine-akzent:       #f59e0b;
  --meine-schrift:      'Georgia', serif;
  --meine-groesse:      1.15rem;
  --meine-zeilenabstand: 1.8;
}

.eigene-karte {
  background-color: var(--meine-farbe);
  border-left:      6px solid var(--meine-akzent);
  font-family:      var(--meine-schrift);
  font-size:        var(--meine-groesse);
  line-height:      var(--meine-zeilenabstand);
}

Eigene Variablen in Aktion

Diese Karte verwendet ausschließlich selbst definierte CSS-Variablen – Farbe, Akzent, Schriftart, Größe und Zeilenabstand.

5. Bootstrap-Variablen überschreiben (Theming)

--bs-primary und andere Variablen können für einen einzelnen Bereich lokal überschrieben werden – ohne SCSS-Kompilierung:

.theme-rot {
  --bs-primary:     #c0392b;
  --bs-primary-rgb: 192, 57, 43;
}

.theme-gruen {
  --bs-primary:     #16a085;
  --bs-primary-rgb: 22, 160, 133;
}

theme-rot: --bs-primary = Rot

bg-primary

text-primary in Rot

theme-gruen: --bs-primary = Grün

bg-primary

text-primary in Grün

6. Dark-Mode-Variablen data-bs-theme="dark"

Bootstrap 5.3 passt alle CSS-Variablen automatisch an, wenn data-bs-theme="dark" gesetzt wird – auf <html> oder einem einzelnen Element:

data-bs-theme="light"

Standardtext und Hintergrund

data-bs-theme="dark"

Standardtext und Hintergrund

7. Eigene Klassen vs. CSS-Variablen

Beide Ansätze funktionieren – aber sie unterscheiden sich stark bei Wartung und Flexibilität.

Ansatz 1: Feste Werte in jeder Klasse

/* Farbe an 4 Stellen hart kodiert */
.btn-kaufen  { background-color: #7c3aed; }
.titel       { color: #7c3aed; }
.badge-neu   { border-color: #7c3aed; }
.link-aktiv  { color: #7c3aed; }

Farbe ändern?

→ Jede Klasse einzeln suchen und anpassen.
Leicht vergessen, schnell inkonsistent.

Lokales Theming?

→ Nur mit einer neuen Klasse pro Element möglich.

Ansatz 2: Farbe als Variable

:root { --marke: #7c3aed; }

.btn-kaufen  { background-color: var(--marke); }
.titel       { color: var(--marke); }
.badge-neu   { border-color: var(--marke); }
.link-aktiv  { color: var(--marke); }

Farbe ändern?

→ Nur :root anpassen – alle Elemente ziehen automatisch nach.

Lokales Theming?

→ Variable im übergeordneten Element überschreiben, fertig.