Bootstrap Theming

Theming Basics

There are several ways to customize Bootstrap, from simple CSS overrides to comprehensive Sass customization.

Customization Methods

Customizing with CSS Variables

Bootstrap 5 includes CSS variables (custom properties) that provide easy customization without the need for Sass compilation.

Root Variables

Bootstrap defines CSS variables at the :root level that you can override:

/* Custom CSS to override Bootstrap variables */
:root {
  --bs-blue: #0a58ca;
  --bs-primary: #0a58ca;
  --bs-primary-rgb: 10, 88, 202;
  --bs-body-font-family: 'Roboto', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-border-radius: 0.375rem;
}

Component-Level Variables

You can also override component-specific variables:

/* Custom button styles */
.btn-primary {
  --bs-btn-bg: #0a58ca;
  --bs-btn-border-color: #0a58ca;
  --bs-btn-hover-bg: #084298;
  --bs-btn-hover-border-color: #084298;
  --bs-btn-active-bg: #084298;
  --bs-btn-active-border-color: #073b8a;
}

Theming with Sass

For more comprehensive theming, you can customize Bootstrap's Sass variables before compilation.

Setting Up Sass

To customize Bootstrap with Sass, you'll need to:

1. Install Bootstrap's source files via npm: npm install bootstrap
2. Set up a Sass compiler (like node-sass, Dart Sass, or a bundler like webpack)
3. Create a custom Sass file that imports Bootstrap

Customizing Variables

Create a custom.scss file to override Bootstrap's default variables:

// Custom.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
$primary: #0a58ca;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;

// 3. Include remainder of required Bootstrap stylesheets
@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/root";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/card";
// ... and more components as needed

// 5. Add additional custom code here
.custom-element {
  background-color: $primary;
  color: white;
  padding: 1rem;
  border-radius: $border-radius;
}

Key Sass Variables

Bootstrap provides a comprehensive set of Sass variables that you can customize.

Colors

// Theme colors
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;

// Color system
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;

Typography

// Font family
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base: $font-family-sans-serif;

// Font sizes
$font-size-base: 1rem;
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;

// Font weights
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: bolder;

Spacing and Sizing

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

// Border radius
$border-radius: .375rem;
$border-radius-sm: .25rem;
$border-radius-lg: .5rem;
$border-radius-xl: 1rem;
$border-radius-2xl: 2rem;
$border-radius-pill: 50rem;

Creating a Custom Theme

Let's walk through creating a custom theme for a fictional company called "GreenTech".

Step 1: Define Brand Colors

// GreenTech brand colors
$green-tech-primary: #2ecc71;
$green-tech-secondary: #27ae60;
$green-tech-accent: #3498db;
$green-tech-dark: #2c3e50;
$green-tech-light: #ecf0f1;

// Override Bootstrap theme colors
$primary: $green-tech-primary;
$secondary: $green-tech-secondary;
$info: $green-tech-accent;
$dark: $green-tech-dark;
$light: $green-tech-light;

Step 2: Customize Typography

// GreenTech typography
$font-family-sans-serif: 'Montserrat', sans-serif;
$headings-font-family: 'Poppins', sans-serif;
$font-weight-normal: 400;
$font-weight-bold: 600;
$headings-font-weight: 700;

Step 3: Adjust Component Styles

// GreenTech component customizations
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;
$box-shadow: 0 0.5rem 1rem rgba($green-tech-dark, 0.15);

// Button overrides
$btn-font-weight: $font-weight-bold;
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;

// Card overrides
$card-border-radius: $border-radius;
$card-border-color: rgba($green-tech-dark, 0.125);
$card-cap-bg: rgba($green-tech-primary, 0.03);

Step 4: Add Custom Utilities

// GreenTech custom utilities
$utilities: (
  "bg-opacity": (
    property: background-color,
    class: bg-opacity,
    values: (
      10: rgba($green-tech-primary, 0.1),
      20: rgba($green-tech-primary, 0.2),
      30: rgba($green-tech-primary, 0.3),
    )
  ),
);

// Add custom CSS after importing Bootstrap
.green-tech-gradient {
  background: linear-gradient(45deg, $green-tech-primary, $green-tech-accent);
  color: white;
}

Advanced Theming Techniques

Creating Color Variants

Bootstrap includes functions to create color variants:

// Using Bootstrap's color functions
$custom-primary: #7952b3;

// Create lighter and darker variants
$custom-primary-100: tint-color($custom-primary, 80%);  // Very light
$custom-primary-200: tint-color($custom-primary, 60%);  // Lighter
$custom-primary-300: tint-color($custom-primary, 40%);  // Light
$custom-primary-400: tint-color($custom-primary, 20%);  // Slightly light
$custom-primary-500: $custom-primary;                   // Base color
$custom-primary-600: shade-color($custom-primary, 20%); // Slightly dark
$custom-primary-700: shade-color($custom-primary, 40%); // Dark
$custom-primary-800: shade-color($custom-primary, 60%); // Darker
$custom-primary-900: shade-color($custom-primary, 80%); // Very dark

Creating a Theme Map

You can create a custom theme map for more control:

// Custom theme map
$custom-theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  "custom-color": #ff6b6b,
  "custom-color-dark": #c92a2a
);

// Merge with Bootstrap's theme map
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

Customizing the Utility API

Bootstrap 5's utility API allows you to generate custom utility classes:

// Add custom utilities
$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      values: auto pointer grab,
    ),
    "viewport-height": (
      property: height,
      class: vh,
      values: (
        25: 25vh,
        50: 50vh,
        75: 75vh,
        100: 100vh
      )
    )
  )
);

Best Practices

Resources