LESS Customization

Prev Next

Bootstrap 3 is written in LESS, not Sass — the switch to Sass didn't happen until Bootstrap 4. Every visual knob in the framework (colors, fonts, spacing, breakpoints) is exposed as a LESS @variable in one file, variables.less. Reset a handful of those variables before Bootstrap's own LESS compiles, and the entire framework — buttons, panels, navbar, alerts, everything — re-themes itself automatically. No CSS overrides, no fighting specificity.

Bootstrap-3-only: LESS is a Bootstrap 3 detail. Bootstrap 4 rewrote the whole source in Sass ($variables, .scss files), and Bootstrap 5 kept Sass. The concept — override a variable before the framework compiles — carries forward unchanged; only the preprocessor and its syntax differ. We'll come back to that mapping at the end of this lesson.

Why the CDN Build Can't Do This

The bootstrap.min.css CDN link loaded at the top of every page in this track is already compiled — the LESS source that produced it is gone. Variables like @brand-primary only exist before compilation; once you're holding minified CSS, there's nothing left to override at the variable level. To customize via LESS you need three things the CDN link can't give you:

You need	Why
Bootstrap's actual `.less` source files	`variables.less`, `mixins.less`, and the rest — not just the compiled CSS output
A LESS compiler	The `lessc` CLI (or a bundler plugin) to turn `.less` into `.css` yourself
A build step	Something that runs on every change — a project no longer served straight off a CDN link

Step 1: Get the LESS Source

Install Bootstrap 3 from npm (or download the source zip from getbootstrap.com) so the less/ folder — full of .less partials — sits on disk next to your project:

# installs the LESS source alongside the compiled CSS/JS
npm install bootstrap@3.4.1
npm install -g less

Step 2: Override Variables Before Importing Bootstrap

Create your own .less file. Import Bootstrap's variables.less first, redefine the variables you care about, then import the main bootstrap.less entry point — in that exact order, so your values win before any component rule reads them:

/* trailmap-theme.less */
@import "node_modules/bootstrap/less/variables.less";

// override BEFORE bootstrap.less is imported
@brand-primary:        #2e7d32;  // trail-green
@font-family-base:     "Segoe UI", Helvetica, Arial, sans-serif;
@border-radius-base:   6px;

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

Order matters. bootstrap.less itself imports variables.less again internally, but LESS only assigns a variable's first definition it encounters — later re-imports of the same variable are ignored. Your override has to land before bootstrap.less runs, which is exactly why we import variables.less and set our overrides first.

Step 3: Compile with lessc

Run the LESS compiler against your theme file to produce a single, ready-to-link CSS file:

# compiles trailmap-theme.less -> trailmap-theme.css
lessc trailmap-theme.less trailmap-theme.css --clean-css

Link the compiled output in place of (or after) the stock bootstrap.min.css, and every component that reads @brand-primary — buttons, the navbar's active link, panel headers, pagination — picks up trail-green without a single hand-written CSS override.

TrailMap Example: Recoloring @brand-primary to Trail-Green

Before the override, TrailMap's .btn-primary and .panel-primary render in Bootstrap's stock blue. After compiling with @brand-primary: #2e7d32; set, the exact same markup renders in trail-green — no class names changed, no CSS added to the page:

<!-- unchanged markup, both before and after -->
<button class="btn btn-primary">Find a Trail</button>
<div class="panel panel-primary">...</div>

That's the entire point of variable-level customization: change one line in trailmap-theme.less, recompile, and the whole brand identity of the site follows — instead of writing .btn-primary { background:#2e7d32; } as a CSS override that now has to be kept in sync by hand everywhere .btn-primary appears.

The Sass Equivalent (Later Versions)

Bootstrap 4 and 5 use the identical strategy with Sass syntax instead of LESS — set your own $variables before @import-ing Bootstrap's Sass:

// Bootstrap 4/5 — Sass equivalent of the same idea
$brand-primary: #2e7d32;
@import "bootstrap/scss/bootstrap";

Same mental model — override the variable, then import the framework — just a different preprocessor and a $ instead of an @ for user variables. If you ever migrate, this is the one workflow that carries over almost unchanged; see it applied in the Bootstrap 4 and 5 tracks' own theming lessons.

Up next: A recolored, custom-branded TrailMap is one thing — making sure it's still usable and fast is another. Accessibility & Performance covers both.

Prev Next