Bootstrap Color Combos
SparklyCodes
- Created
- 3 years, 8 months ago
- Creator
- SparklyLightus
- Favorites
- 1211
Profile
Bootstrap colors can be an absolute nightmare. I've seen references for the colors, but not in combination with each other. So I decided to change that! Below in the gallery you'll see all the combinations AND all themes.
I'll spare you the trouble and say that choosing a combination that works in all themes is almost impossible, so look for the least broken, listed below.
Universal
- Any BG/Dark text
- Dark BG/Any text*
- Faded BG/Any text
- Any BG/Light text
- Light BG/Any text*
Best colors by theme
- Default: Secondary/Danger/Warning
- Night: Primary/Info
- Pink: Primary/Info
- Teal: Success/Warning/Info
- Bee: Danger
- Velvet: Warning
Best combos:
- Danger BG/warning text
- Secondary BG/dark text
*A note on light/dark:
Because there are themes with both dark and light backgrounds, a light font on a light theme will barely appear (if at all), same with dark. You can avoid this by having a light text on a dark background, and dark text on light background.
| # | Primary BG | Secondary BG | Success BG | Danger BG | Warning BG | Info BG | Faded BG | Dark BG | Light BG |
|---|---|---|---|---|---|---|---|---|---|
| Primary text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Secondary text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Success text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Danger text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Warning text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Info text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Muted text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Dark text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
| Light text | TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
TEXT |
