LESS with Bootstrap

Bootstrap's History with LESS

Bootstrap versions 2 and 3 were written in LESS, exposing a large set of @variables (colors, spacing, typography, breakpoints) that consumers could override before compiling. Bootstrap 4 switched to Sass, and Bootstrap 5 remains Sass-based, but Bootstrap 3's LESS source is still actively maintained in many legacy codebases.

Understanding LESS remains directly useful for any team maintaining a Bootstrap 3 project, since customizing it correctly requires overriding LESS variables before Bootstrap's own source is imported, not after.

// custom-variables.less (import BEFORE bootstrap's variables.less)
@brand-primary: #2563eb;
@font-size-base: 15px;

@import "bootstrap/less/bootstrap.less";

Because of lazy evaluation, a variable set before Bootstrap's own default declaration effectively becomes the new default throughout Bootstrap's source.

Overriding Bootstrap 3 Variables

@import "custom-variables"; // your overrides first
@import "bootstrap/less/bootstrap.less"; // bootstrap's source second

• Bootstrap 3's own variables are typically declared without !default-style protection, so LESS's lazy evaluation determines the final value from whichever declaration is last in scope.
• Importing your overrides before Bootstrap's source, combined with lazy evaluation, is the standard customization pattern.
• Bootstrap 3 exposes mixins (.make-row(), .center-block()) that can be reused directly in your own custom components.
• Never edit Bootstrap's own source files directly, always override through your own imported variables file.

Bootstrap 3 LESS Customization Cheatsheet

Common Bootstrap 3 variables you can override before compiling.

Why Bootstrap Moved to Sass

Bootstrap's team cited Sass's more powerful module system, better tooling ecosystem at the time, and Sass maps (for more structured configuration than a flat list of LESS variables) as key reasons for the switch starting with Bootstrap 4.

• Sass's @use/@forward module system offered stronger namespacing than LESS's @import.
• Sass maps allowed more structured configuration data than a flat list of individual LESS variables.
• The broader Sass tooling and plugin ecosystem was larger by the time Bootstrap 4 was developed.

Maintaining a Legacy Bootstrap 3 Project

If you inherit a Bootstrap 3 codebase, resist the urge to immediately migrate to Bootstrap 5 without a clear plan, given how extensively Bootstrap 3's grid, components, and utility classes may already be relied upon throughout the project's markup.

• Audit how deeply Bootstrap 3's specific class names and grid system are used before planning a migration.
• Keep the LESS-based customization file as the single place for brand and spacing overrides.
• Consider incremental component-by-component migration rather than a single large rewrite.

Using Bootstrap 3's Own Mixins Directly

Beyond variable overrides, Bootstrap 3 exposes reusable mixins you can call directly in your own custom component styles, avoiding duplicated layout or utility logic.

.custom-panel {
  .make-row();
  .clearfix();
}

Common Mistakes

• Editing Bootstrap 3's own source files directly instead of overriding variables through a separately imported file.
• Importing custom variable overrides after Bootstrap's own source, causing the overrides to have no effect.
• Attempting a full Bootstrap 5 migration without first auditing how deeply Bootstrap 3's specific classes are used throughout the markup.
• Forgetting that Bootstrap 3's variables typically lack !default-style protection, making override order especially important.

Key Takeaways

• Bootstrap 2 and 3 were built entirely on LESS; Bootstrap 4 and 5 moved to Sass.
• Customize Bootstrap 3 by importing your own variable overrides before Bootstrap's own LESS source.
• Bootstrap's move to Sass was driven by its module system, Sass maps, and tooling ecosystem at the time.
• Legacy Bootstrap 3 projects can still be maintained effectively with a solid understanding of LESS.