bootstrap-customizelisted
Install: claude install-skill ronnieiscoo/bootstrap-expert
# Bootstrap 5.3 Customization
Bootstrap 5.3 provides powerful customization through Sass variables, CSS custom properties, and a comprehensive theming system including built-in color modes.
## Customization Methods
### 1. CSS Variables (Runtime Customization)
Bootstrap's docs call these "CSS variables" (technically CSS custom properties). Modify styles without recompiling by overriding at any level:
```css
/* Global override */
:root {
--bs-primary: #0074d9;
--bs-primary-rgb: 0, 116, 217;
--bs-body-font-family: 'Inter', sans-serif;
}
/* Component-level override */
.my-card {
--bs-card-bg: #f0f0f0;
--bs-card-border-color: transparent;
}
/* Local scope override */
.custom-button {
--bs-btn-bg: #custom-color;
--bs-btn-border-color: #custom-color;
--bs-btn-hover-bg: #darker-custom;
}
```
#### CSS Variable Prefix
Customize the `bs-` prefix via the `$prefix` Sass variable to avoid conflicts in projects embedding Bootstrap alongside other frameworks:
```scss
$prefix: "myapp-"; // Results in --myapp-primary, --myapp-body-bg, etc.
```
### 2. Sass Variables (Compile-time)
For comprehensive theming, override Sass variables before importing Bootstrap:
```scss
// 1. Include functions first
@import "bootstrap/scss/functions";
// 2. Override default variables
$primary: #0074d9;
$secondary: #7fdbff;
$font-family-base: 'Inter', sans-serif;
$border-radius: 0.5rem;
$enable-shadows: true;
// 3. Import Bootstrap
@import "bootstrap/scss/bootstrap";
```
**Order matte