Theming Bootstrap

Customizing Colors

Bootstrap's color system can be customized by overriding the theme colors:

// Override theme colors
$primary: #0074d9;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;

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

You can also create custom theme colors by modifying the $theme-colors map:

// Required
@import "../node_modules/bootstrap/scss/functions";
@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";

// Create your own map
$custom-colors: (
  "custom-color": #900,
  "custom-color-2": #090
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

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

Customizing Spacers

Modify the spacing utilities by overriding the $spacer variable or the $spacers map:

// Change the base spacer value
$spacer: 1.5rem;

// Or customize the spacers map
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4.5,  // Custom spacer
  7: $spacer * 6      // Custom spacer
);
                        

Customizing Typography

Modify the typography by overriding font variables:

// Font family
$font-family-sans-serif: "Open Sans", 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 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;

// Heading sizes
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
                        

Customizing Border Radius

Change the border radius of components:

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

Interactive Theme Builder

Use this interactive tool to experiment with Bootstrap's theme variables and see the changes in real-time. Adjust colors, spacing, typography, and other properties to create your custom Bootstrap theme.

// Custom variables
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$danger: #dc3545;

$font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.5;

$border-radius: .375rem;
$spacer: 1rem;

$enable-rounded: true;
$enable-shadows: false;
$enable-gradients: false;

Creating Custom Components

You can extend Bootstrap by creating your own custom components that follow Bootstrap's design patterns.

Custom Component Example

// _custom-card.scss

// Define the custom card component
.custom-card {
  @extend .card;
  border-left: 4px solid $primary;
  box-shadow: $box-shadow-sm;
  
  .custom-card-header {
    @extend .card-header;
    background-color: rgba($primary, 0.1);
    border-bottom: none;
    font-weight: $font-weight-bold;
  }
  
  .custom-card-body {
    @extend .card-body;
    padding: $spacer * 1.5;
  }
  
  &.custom-card-success {
    border-left-color: $success;
    
    .custom-card-header {
      background-color: rgba($success, 0.1);
    }
  }
  
  &.custom-card-danger {
    border-left-color: $danger;
    
    .custom-card-header {
      background-color: rgba($danger, 0.1);
    }
  }
}

// Import in your main Sass file
@import "custom-card";
                        

HTML usage of the custom component:

<div class="custom-card">
  <div class="custom-card-header">Custom Card Header</div>
  <div class="custom-card-body">
    <h5 class="card-title">Custom Card Title</h5>
    <p class="card-text">Some custom card content.</p>
  </div>
</div>

<div class="custom-card custom-card-success">
  <div class="custom-card-header">Success Card</div>
  <div class="custom-card-body">
    <p class="card-text">A success-themed custom card.</p>
  </div>
</div>
                        

Overriding Default Variables

Bootstrap provides a comprehensive set of Sass variables that you can override to customize almost every aspect of the framework.

Common Variables to Override

// Colors
$primary: #0074d9;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;

// Options
$enable-rounded: true;
$enable-shadows: true;
$enable-gradients: false;
$enable-transitions: true;

// Spacing
$spacer: 1rem;

// Body
$body-bg: #fff;
$body-color: $dark;

// Links
$link-color: $primary;
$link-decoration: none;
$link-hover-color: darken($link-color, 15%);
$link-hover-decoration: underline;

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

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

// Components
$border-width: 1px;
$border-color: #dee2e6;
$border-radius: .375rem;
$box-shadow: 0 .5rem 1rem rgba($dark, .15);
$transition-base: all .2s ease-in-out;
                        

Using the Utility API

Bootstrap 5 introduced a Utility API that allows you to create your own utility classes with the same naming convention as Bootstrap's built-in utilities.

Creating Custom Utilities

@import "../node_modules/bootstrap/scss/functions";
@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";

// Create custom utilities
$utilities: map-merge(
  $utilities,
  (
    "viewport-height": (
      property: height,
      class: vh,
      values: (
        25: 25vh,
        50: 50vh,
        75: 75vh,
        100: 100vh
      )
    ),
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: pointer default not-allowed
    ),
    "opacity": (
      property: opacity,
      class: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      )
    )
  )
);

// Import utilities API
@import "../node_modules/bootstrap/scss/utilities/api";
                        

This creates new utility classes like .vh-50, .cursor-pointer, and .opacity-50 that can be used in your HTML:

<div class="vh-100 d-flex align-items-center justify-content-center">
  <div class="cursor-pointer opacity-75">
    Full height container with a pointer cursor and 75% opacity
  </div>
</div>