Bootstrap Customization — Sass & Theming

One of Bootstrap's greatest strengths is its customizability. While the default design is clean and professional, you can easily transform it to match your brand's identity. Bootstrap is built with Sass (Syntactically Awesome Style Sheets), a CSS preprocessor that allows you to use variables, nesting, mixins, and functions. This makes customization powerful and maintainable.

What is Sass?

Sass is a CSS preprocessor that extends CSS with powerful features:

• Variables: Store reusable values (colors, fonts, spacing).
• Nesting: Write cleaner, more organized CSS.
• Mixins: Reusable blocks of CSS.
• Functions: Perform operations and calculations.
• Partials & Import: Split CSS into smaller, manageable files.

Why Customize with Sass?

• Consistent Theming: Change one variable and it updates everywhere.
• Maintainable Code: No need to find and replace across hundreds of files.
• Optimized Output: Only include the components you need (reduces file size).
• Professional Branding: Match your company colors, fonts, and spacing exactly.

Setting Up Sass with Bootstrap

Method 1: npm (Recommended)

Install Bootstrap and its dependencies via npm:

npm install bootstrap
npm install sass

Create a custom Sass file (e.g., custom.scss):

// 1. Import Bootstrap's functions and variables
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// 2. Override variables BEFORE importing Bootstrap
$primary: #FF6B35;
$secondary: #2D4059;
$success: #2ECC71;
$font-family-base: 'Inter', sans-serif;
$body-bg: #F8F9FA;

// 3. Import Bootstrap's full CSS
@import "bootstrap/scss/bootstrap";

// 4. Your custom styles below
.custom-class {
    background: $primary;
    color: white;
}

Compile Sass to CSS:

sass custom.scss custom.css

Method 2: CDN with Custom Overrides

If you're using the CDN version, you can still customize by adding CSS overrides:

<!-- Bootstrap CSS (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Your custom CSS overrides -->
<style>
    :root {
        --bs-primary: #FF6B35;
        --bs-primary-rgb: 255, 107, 53;
        --bs-secondary: #2D4059;
        --bs-secondary-rgb: 45, 64, 89;
    }
    .btn-primary {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }
    .btn-primary:hover {
        background-color: #E55A2B;
        border-color: #E55A2B;
    }
</style>

Key Sass Variables to Customize

1. Colors

Bootstrap's color system is built on a base palette that you can override.

$primary: #FF6B35;       // Brand primary color
$secondary: #2D4059;     // Secondary color
$success: #2ECC71;       // Success (green)
$info: #3498DB;          // Info (blue)
$warning: #F1C40F;       // Warning (yellow)
$danger: #E74C3C;        // Danger (red)
$light: #F8F9FA;         // Light (background)
$dark: #1E2230;          // Dark (text)

2. Typography

$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
$font-size-base: 1rem;              // 16px
$font-weight-base: 400;
$line-height-base: 1.6;

$headings-font-family: 'Poppins', sans-serif;
$headings-font-weight: 600;
$headings-line-height: 1.25;

$h1-font-size: 2.5rem;
$h2-font-size: 2rem;
$h3-font-size: 1.75rem;
$h4-font-size: 1.5rem;
$h5-font-size: 1.25rem;
$h6-font-size: 1rem;

3. Spacing

$spacer: 1rem;              // Base spacing unit (16px)
$spacers: (
    0: 0,
    1: $spacer * .25,        // 0.25rem (4px)
    2: $spacer * .5,         // 0.5rem (8px)
    3: $spacer * 1,          // 1rem (16px)
    4: $spacer * 1.5,        // 1.5rem (24px)
    5: $spacer * 3,          // 3rem (48px)
    6: $spacer * 4.5,        // 4.5rem (72px)
    7: $spacer * 6,          // 6rem (96px)
);

4. Border Radius

$border-radius: .375rem;      // 6px (default)
$border-radius-sm: .25rem;     // 4px
$border-radius-lg: .5rem;      // 8px
$border-radius-xl: 1rem;       // 16px
$border-radius-pill: 50rem;    // Pill shape

5. Grid & Breakpoints

$grid-columns: 12;
$grid-gutter-width: 1.5rem;    // Gutters between columns

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
);

$breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

6. Shadows

$box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
$box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
$box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
$box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);

Customizing Bootstrap Components

Custom Buttons

// In your custom.scss
$btn-padding-y: .5rem;
$btn-padding-x: 1.5rem;
$btn-font-weight: 600;
$btn-border-radius: 50px;  // Pill shape buttons

// Or create a custom button variant
.btn-custom {
    @include button-variant(#6C63FF, #5A52D5);
}

Custom Forms

$input-bg: #F8F9FA;
$input-border-color: #DEE2E6;
$input-border-radius: 8px;
$input-focus-border-color: $primary;
$input-focus-box-shadow: 0 0 0 0.25rem rgba($primary, .25);

Custom Navbar

$navbar-padding-y: 1rem;
$navbar-padding-x: 1.5rem;
$navbar-nav-link-padding-x: 1rem;
$navbar-brand-font-size: 1.5rem;

Custom Cards

$card-border-radius: 12px;
$card-box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
$card-border-color: rgba(0, 0, 0, .05);

Creating a Complete Theme

Here's a complete custom theme file that you can use as a starting point:

// _custom-theme.scss

// 1. Import Bootstrap functions first
@import "bootstrap/scss/functions";

// 2. Define your custom colors
$brand-primary: #6C63FF;
$brand-secondary: #2D4059;
$brand-accent: #FF6B6B;

// 3. Override Bootstrap variables
$primary: $brand-primary;
$secondary: $brand-secondary;
$danger: $brand-accent;
$body-bg: #F4F6F9;
$body-color: #2D3436;

// 4. Typography
$font-family-base: 'Inter', -apple-system, system-ui, sans-serif;
$headings-font-family: 'Poppins', $font-family-base;
$headings-font-weight: 700;

// 5. Spacing
$spacer: 1.25rem;
$spacers: (
    0: 0,
    1: $spacer * .25,
    2: $spacer * .5,
    3: $spacer * 1,
    4: $spacer * 1.5,
    5: $spacer * 3,
    6: $spacer * 4.5,
    7: $spacer * 6,
);

// 6. Border radius
$border-radius: .5rem;
$border-radius-lg: 1rem;
$border-radius-sm: .25rem;

// 7. Shadows
$box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .08);
$box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .12);

// 8. Buttons
$btn-padding-y: .6rem;
$btn-padding-x: 1.5rem;
$btn-font-weight: 600;
$btn-border-radius: 50px;

// 9. Forms
$input-border-radius: 8px;
$input-focus-box-shadow: 0 0 0 0.25rem rgba($primary, .25);

// 10. Cards
$card-border-radius: 16px;
$card-box-shadow: $box-shadow;
$card-border-color: rgba(0, 0, 0, .04);

// 11. Navbar
$navbar-padding-y: .75rem;
$navbar-padding-x: 2rem;
$navbar-brand-font-size: 1.5rem;

// 12. Import Bootstrap
@import "bootstrap/scss/bootstrap";

// 13. Custom classes
// Custom button
.btn-brand {
    @include button-variant($brand-primary, darken($brand-primary, 10%));
}

// Custom card with gradient
.card-gradient {
    background: linear-gradient(135deg, $brand-primary, $brand-secondary);
    color: white;
    border: none;
}

// Custom section padding
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

Creating a Custom Color Palette

To create a complete brand color palette, override the theme colors map:

$custom-colors: (
    "brand": #6C63FF,
    "brand-light": #A8A3FF,
    "brand-dark": #4A42D5,
    "accent": #FF6B6B,
    "accent-light": #FFA8A8,
);

$theme-colors: map-merge($theme-colors, $custom-colors);

// Now you can use:
// .bg-brand, .text-brand, .btn-brand, etc.

Building a Custom Theme with npm

Project Structure

project/
├── node_modules/
├── src/
│   ├── scss/
│   │   ├── custom.scss        # Main Sass file
│   │   ├── _variables.scss    # Custom variables
│   │   └── _utilities.scss    # Custom utilities
│   ├── js/
│   └── index.html
├── package.json
└── package-lock.json

package.json

{
    "name": "custom-bootstrap-theme",
    "version": "1.0.0",
    "scripts": {
        "build": "sass src/scss/custom.scss dist/css/style.css",
        "watch": "sass --watch src/scss/custom.scss dist/css/style.css"
    },
    "dependencies": {
        "bootstrap": "^5.3.0",
        "sass": "^1.62.0"
    }
}

Build Command

npm run build    # Build once
npm run watch    # Watch for changes

Example: Custom Brand Theme

Here's a complete example showing a brand-themed website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brand Theme</title>
    <link rel="stylesheet" href="dist/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Custom Navbar -->
    <nav class="navbar navbar-expand-lg bg-primary navbar-dark">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#">BrandName</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navMenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section with custom gradient -->
    <section class="section-padding text-center text-white" style="background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));">
        <div class="container">
            <h1 class="display-3 fw-bold">Welcome to BrandName</h1>
            <p class="lead mb-4">A modern theme built with Bootstrap and Sass</p>
            <a href="#" class="btn btn-light btn-lg rounded-pill px-5 fw-bold">Get Started</a>
        </div>
    </section>

    <!-- Features with custom cards -->
    <section class="section-padding">
        <div class="container">
            <h2 class="text-center mb-5">Our Features</h2>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card h-100 text-center p-4">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 72px; height: 72px;">
                            <i class="fas fa-rocket text-primary fs-1"></i>
                        </div>
                        <h5 class="card-title">Fast Performance</h5>
                        <p class="card-text text-muted">Optimized for speed and efficiency.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100 text-center p-4">
                        <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 72px; height: 72px;">
                            <i class="fas fa-shield-alt text-success fs-1"></i>
                        </div>
                        <h5 class="card-title">Secure</h5>
                        <p class="card-text text-muted">Built with security in mind.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100 text-center p-4">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 72px; height: 72px;">
                            <i class="fas fa-palette text-warning fs-1"></i>
                        </div>
                        <h5 class="card-title">Customizable</h5>
                        <p class="card-text text-muted">Fully customizable to your needs.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>