Farben
Angaben im Contao-Backend für CSS-ID immer ohne vorhergehende Raute #id und CSS-Klassen ohne vorhergehenden Punkt .klasse vornehmen. Mehrere Klassen sind durch ein Leerzeichen zu trennen.
Textfarben
| Farbe | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Weiß | .color-white |
Textfarbe | #ffffff | R: 255 G: 255 B: 255 |
| Hellgrau | .color-light |
Textfarbe | #f8f9fa | R: 248 G: 249 B: 250 |
| Dunkelgrau | .color-dark |
Textfarbe | #212529 | R: 33 G: 37 B: 41 |
| Schwarz | .color-black |
Textfarbe | #000000 | R: 0 G: 0 B: 0 |
| Erfolg (Grün) | .color-success |
Textfarbe | #198754 | R: 25 G: 135 B: 84 |
| Info (Türkis) | .color-info |
Textfarbe | #0dcaf0 | R: 13 G: 202 B: 240 |
| Warnung (Orange) | .color-warning |
Textfarbe | #ffc107 | R: 255 G: 193 B: 7 |
| Achtung (Rot) | .color-danger |
Textfarbe | #dc3545 | R: 220 G: 53 B: 69 |
| Primär (Blau) | .color-primary |
Textfarbe | #0d6efd | R: 13 G: 110 B: 253 |
| Sekundär (Grau) | .color-secondary |
Textfarbe | #6c757d | R: 108 G: 117 B: 125 |
Hintergrundfarben
| Farbe | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Weiß | .bg-white |
Hintergrundfarbe | #ffffff | R: 255 G: 255 B: 255 |
| Hellgrau | .bg-light |
Hintergrundfarbe | #f8f9fa | R: 248 G: 249 B: 250 |
| Dunkelgrau | .bg-dark |
Hintergrundfarbe | #212529 | R: 33 G: 37 B: 41 |
| Schwarz | .bg-black |
Hintergrundfarbe | #000000 | R: 0 G: 0 B: 0 |
| Erfolg (Grün) | .bg-success |
Hintergrundfarbe | #198754 | R: 25 G: 135 B: 84 |
| Info (Türkis) | .bg-info |
Hintergrundfarbe | #0dcaf0 | R: 13 G: 202 B: 240 |
| Warnung (Orange) | .bg-warning |
Hintergrundfarbe | #ffc107 | R: 255 G: 193 B: 7 |
| Achtung (Rot) | .bg-danger |
Hintergrundfarbe | #dc3545 | R: 220 G: 53 B: 69 |
| Primär (Blau) | .bg-primary |
Hintergrundfarbe | #0d6efd | R: 13 G: 110 B: 253 |
| Sekundär (Grau) | .bg-secondary |
Hintergrundfarbe | #6c757d | R: 108 G: 117 B: 125 |
Rahmenfarben
| Farbe | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Standard | .border-default |
#cccccc | R: 204 G: 204 B: 204 | |
| Weiß | .border-white |
#ffffff | R: 255 G: 255 B: 255 | |
| Hellgrau | .border-light |
#f8f9fa | R: 248 G: 249 B: 250 | |
| Dunkelgrau | .border-dark |
#212529 | R: 33 G: 37 B: 41 | |
| Schwarz | .border-black |
#000000 | R: 0 G: 0 B: 0 | |
| Erfolg (Grün) | .border-success |
#198754 | R: 25 G: 135 B: 84 | |
| Info (Türkis) | .border-info |
#0dcaf0 | R: 13 G: 202 B: 240 | |
| Warnung (Orange) | .border-warning |
#ffc107 | R: 255 G: 193 B: 7 | |
| Achtung (Rot) | .border-danger |
#dc3545 | R: 220 G: 53 B: 69 | |
| Primär (Blau) | .border-primary |
#0d6efd | R: 13 G: 110 B: 253 | |
| Sekundär (Grau) | .border-secondary |
#6c757d | R: 108 G: 117 B: 125 |