Bootstrap organizes its color system around a SCSS map called $theme-colors. This map contains named entries — primary, secondary, success, danger, warning, info, light, dark — that generate hundreds of utility classes, component variants, and contextual styles. Customizing this map is the single most impactful Bootstrap theming decision.
How Bootstrap Uses Theme Colors
Every .btn-primary, .bg-secondary, .text-danger, and .alert-warning class is generated from $theme-colors. Bootstrap also generates hover states, focus rings, and disabled styles by darkening or lightening these base values. Getting the base colors right means the entire generated system looks cohesive.
Exporting from PaletteRx
Select Bootstrap from the CSS & JS Frameworks section in PaletteRx's export step. PaletteRx maps your palette roles to Bootstrap's theme color keys: Primary maps to primary, Secondary colors map to secondary, Dark Base to dark, Light Base to light. Additional colors fill remaining slots.
The export generates a SCSS override block that you paste before Bootstrap's import in your build pipeline.
Integration with Your Build
In your SCSS file, define the theme color overrides before importing Bootstrap. This ensures Bootstrap generates all utilities and components using your custom values instead of its defaults. The generated CSS will include your palette in every utility class, component, and contextual style.
Contrast Considerations
Bootstrap automatically calculates contrasting text colors for buttons and badges using a luminance threshold. If your custom colors are well-balanced (which PaletteRx ensures through WCAG checking), Bootstrap's auto-contrast will work correctly. Extremely mid-tone colors near the luminance threshold can cause unexpected white-to-black text switches.
.btn-primary with white text, you know the contrast passes because PaletteRx tested that combination during the WCAG step.