Advanced Bootstrap Customization

Introduction

Once you master basic customization, you can create a unique look while leveraging Bootstrap's powerful grid and utilities. This chapter covers creating custom themes, advanced Sass overrides, and optimizing for performance.

1. The Power of Sass Variables

Bootstrap is built on Sass variables. Modifying these variables allows you to change the entire look of the framework without writing new CSS selectors.

Common Variables

Example: Custom Theme

// custom.scss
$primary: #ff5722; // Orange
$secondary: #4caf50; // Green
$font-family-base: "Arial", sans-serif;
$spacer: 1.2rem; // Increase spacing

@import "node_modules/bootstrap/scss/bootstrap";

2. Modifying the Grid System

You can even customize the core grid structure, such as the number of columns or breakpoints, by setting variables before importing Bootstrap.

// custom.scss
$grid-columns: 16;       // 16-column layout
$grid-gutter-width: 2rem; // Wider gutters

@import "node_modules/bootstrap/scss/bootstrap";

3. Removing Unused Components

For better performance, import only the parts of Bootstrap you need. This dramatically reduces file size.

// custom.scss

// 1. Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// 2. Essentials
@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";

// 3. Components (Pick what you need)
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/forms";
// @import "node_modules/bootstrap/scss/carousel"; // Excluded

4. Best Practices for Large Projects

• Modularize: Split your overrides into partials like _variables.scss, _components.scss.
• CSS Variables: Use CSS custom properties (:root { --primary-color: ... }) for dynamic themes that can change at runtime.
• Consistency: Stick to the default variable naming conventions to keep your codebase understandable.