Complete guide to customizing Bootstrap 5 with Sass, theme colors, and custom components
While Bootstrap provides a solid foundation for web development, customizing it allows you to create unique designs that match your brand identity. By using Sass variables, you can modify colors, spacing, typography, and component styles without overwriting Bootstrap's core files.
This guide covers customization using Bootstrap 5's Sass source files, which gives you complete control over the framework while keeping your code maintainable and upgrade-friendly.
To customize Bootstrap, you'll need to install it via npm and set up a Sass compiler.
npm install bootstrap @popperjs/core npm install --save-dev sass
Create a file called custom.scss in your project's src/scss/ directory.
{
"scripts": {
"sass": "sass src/scss:dist/css --watch",
"build": "sass src/scss:dist/css --style compressed"
}
}
node_modules/bootstrap/scss/ - Bootstrap source files (don't edit these)src/scss/custom.scss - Your customization filedist/css/custom.css - Compiled outputBootstrap uses Sass variables for all colors, spacing, and typography. Override them before importing Bootstrap.
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // 2. Override default variables BEFORE importing Bootstrap $primary: #6366f1; // Indigo $secondary: #64748b; // Slate $success: #10b981; // Emerald $info: #06b6d4; // Cyan $warning: #f59e0b; // Amber $danger: #ef4444; // Red $light: #f1f5f9; // Light gray $dark: #1e293b; // Dark slate // 3. Include Bootstrap's default variables @import "../node_modules/bootstrap/scss/variables"; // 4. Include the rest of Bootstrap @import "../node_modules/bootstrap/scss/bootstrap";
| Variable | Default Value | Description |
|---|---|---|
| $primary | #0d6efd | Primary brand color |
| $secondary | #6c757d | Secondary color |
| $success | #198754 | Success state color |
| $danger | #dc3545 | Error/danger color |
| $warning | #ffc107 | Warning state color |
| $info | #0dcaf0 | Info state color |
You can add custom colors to Bootstrap's color system by extending the $theme-colors map.
This makes your colors available for utility classes like .bg-custom and .text-custom.
// Add custom colors to the theme-colors map $custom-colors: ( "purple": #a855f7, "pink": #ec4899, "orange": #f97316, "teal": #14b8a6 ); // Merge with existing theme colors $theme-colors: map-merge($theme-colors, $custom-colors); // Now you can use: .bg-purple, .text-pink, .btn-orange, etc.
Customize Bootstrap's typography by overriding font variables and modifying the type scale.
// Font families $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; $font-family-monospace: "Fira Code", "Courier New", monospace; $font-family-base: $font-family-sans-serif; // Font sizes $font-size-base: 1rem; // 16px default $font-size-sm: $font-size-base * 0.875; // 14px $font-size-lg: $font-size-base * 1.125; // 18px // Headings $h1-font-size: $font-size-base * 2.5; // 40px $h2-font-size: $font-size-base * 2; // 32px $h3-font-size: $font-size-base * 1.75; // 28px $h4-font-size: $font-size-base * 1.5; // 24px $h5-font-size: $font-size-base * 1.25; // 20px $h6-font-size: $font-size-base; // 16px // Font weights $font-weight-lighter: 300; $font-weight-normal: 400; $font-weight-semibold: 600; $font-weight-bold: 700; // Line heights $line-height-base: 1.6; $line-height-sm: 1.4; $line-height-lg: 1.8;
// Spacer base (used for margin and padding utilities) $spacer: 1rem; // 16px // Customize spacing scale $spacers: ( 0: 0, 1: $spacer * 0.25, // 4px 2: $spacer * 0.5, // 8px 3: $spacer, // 16px 4: $spacer * 1.5, // 24px 5: $spacer * 3, // 48px 6: $spacer * 4, // 64px (custom) 7: $spacer * 6, // 96px (custom) ); // Grid breakpoints $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); // Container max widths $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ); // Grid columns and gutter $grid-columns: 12; $grid-gutter-width: 1.5rem; // 24px
Each Bootstrap component has its own set of Sass variables for customization.
// Button styles $btn-padding-y: 0.5rem; $btn-padding-x: 1.25rem; $btn-font-size: 1rem; $btn-line-height: 1.5; $btn-border-radius: 0.5rem; // More rounded $btn-font-weight: 600; // Semibold $btn-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); $btn-focus-width: 0.2rem; $btn-transition: all 0.15s ease-in-out;
// Card styles $card-spacer-y: 1.5rem; $card-spacer-x: 1.5rem; $card-border-width: 0; // No border $card-border-radius: 1rem; // More rounded $card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); $card-cap-bg: transparent; $card-bg: $white;
// Input styles $input-padding-y: 0.75rem; $input-padding-x: 1rem; $input-font-size: 1rem; $input-border-radius: 0.5rem; $input-border-color: #d1d5db; $input-focus-border-color: $primary; $input-focus-box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
Instead of importing all of Bootstrap, you can import only the components you need to reduce file size.
// 1. Include functions @import "../node_modules/bootstrap/scss/functions"; // 2. Include custom variable overrides $primary: #6366f1; // 3. Include required Bootstrap files @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables-dark"; @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/utilities"; // 4. Import only the components you need @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/buttons"; @import "../node_modules/bootstrap/scss/forms"; @import "../node_modules/bootstrap/scss/nav"; @import "../node_modules/bootstrap/scss/navbar"; @import "../node_modules/bootstrap/scss/card"; // 5. Include utilities API @import "../node_modules/bootstrap/scss/utilities/api";
// Enable dark mode $enable-dark-mode: true; // Customize dark mode colors $primary-dark: #818cf8; // Lighter primary for dark mode $body-bg-dark: #0f172a; $body-color-dark: #e2e8f0; $border-color-dark: #334155; // HTML usage: // <html data-bs-theme="dark"> // Or toggle with JavaScript: // document.documentElement.setAttribute('data-bs-theme', 'dark');
// Add custom utilities to the utilities map $utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor, values: pointer grab move not-allowed ), "backdrop-blur": ( property: backdrop-filter, class: backdrop-blur, values: ( sm: blur(4px), md: blur(8px), lg: blur(16px) ) ) ) ); // Usage: .cursor-pointer, .backdrop-blur-md, etc.
--source-map to Sass command for debuggingFor a complete reference, check out Bootstrap's official documentation on Sass customization at getbootstrap.com/docs/5.3/customize/sass/. The docs include a full list of all customizable variables and advanced techniques like creating custom themes and extending components.