bootstrap-overrides

10 original, CSS-only visual systems for Bootstrap 5.3.x.

Website · npm · Issues

bootstrap-overrides gives an existing Bootstrap 5 application a new visual system without replacing Bootstrap, changing component markup, or taking over Bootstrap's JavaScript behavior.

Bootstrap remains the foundation. You load Bootstrap first, then one override stylesheet.

Current package: 4.0.0
Bootstrap compatibility: >=5.3.0 <6
Runtime dependencies: none
Sass / SCSS: none

Why bootstrap-overrides?

The package is intentionally narrower than a component framework or a complete theme engine. It is designed for teams that already use Bootstrap and want a stronger visual identity without migrating templates, replacing Bootstrap JavaScript, or introducing a second layout system.

The overrides are limited to visual properties such as color, surfaces, borders, typography scale/weight, bounded spacing, bounded control heights, border radius, focus treatment, and restrained shadows.

They do not redefine Bootstrap's grid, flex utilities, display utilities, positioning, responsive behavior, transforms, overflow mechanics, z-index strategy, or JavaScript-driven component behavior.

The 10 systems

| System | File | Character | | --- | --- | --- | | Axis | axis.css | Neutral, compact, precise | | Canvas | canvas.css | Soft, open, editorial | | Cobalt | cobalt.css | Crisp blue product UI | | Ember | ember.css | Warm, energetic interface | | Grove | grove.css | Natural, calm, grounded | | Ledger | ledger.css | Dense, structured, professional | | Quartz | quartz.css | Cool, polished, product-focused | | Signal | signal.css | High-clarity, action-oriented | | Tide | tide.css | Clean, fluid, modern | | Violet | violet.css | Expressive, refined, contemporary |

See live examples at https://overrides.stickdazzle.com/.

Installation

Install Bootstrap and the override package:

npm install bootstrap bootstrap-overrides

CSS import

Load Bootstrap first and exactly one override second:

@import "bootstrap/dist/css/bootstrap.min.css";
@import "bootstrap-overrides/dist/axis.css";

You can replace axis.css with any of the ten files listed above.

JavaScript / bundler import

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-overrides/dist/quartz.css";

If your project uses Bootstrap JavaScript components, import Bootstrap normally as well:

import "bootstrap/dist/js/bootstrap.bundle.min.js";

bootstrap-overrides does not replace or patch Bootstrap JavaScript.

CDN

Bootstrap first:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
>

Then one override:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/axis.css"
>

For production, pin the package version rather than using an unversioned CDN URL.

Existing Bootstrap markup stays the same

Before:

<button class="btn btn-primary">Save changes</button>

After installing an override:

<button class="btn btn-primary">Save changes</button>

No wrapper is required. No data-theme attribute is required. No component migration is required.

The stylesheet changes Bootstrap's visual presentation while Bootstrap continues to own the component contract.

Switching systems at runtime

If your application needs a visual-system selector, swap only the override stylesheet.

<link
  id="bootstrapOverride"
  rel="stylesheet"
  href="/node_modules/bootstrap-overrides/dist/axis.css"
>

const link = document.getElementById("bootstrapOverride");
link.href = "/node_modules/bootstrap-overrides/dist/violet.css";

In a production application, resolve the URL through your bundler, asset pipeline, or pinned CDN URL rather than assuming node_modules is publicly served.

What is overridden

The visual contract covers the major Bootstrap component families used in product interfaces, including:

• buttons, sizes, states, outlines, and button groups
• forms, selects, textareas, checks, radios, switches, ranges, validation, and input groups
• cards, alerts, badges, list groups, and breadcrumbs
• dropdowns, navs, tabs, pills, navbar appearance, and pagination
• accordions
• tables and progress indicators
• modal, offcanvas, toast, tooltip, and popover surfaces
• spinners, placeholders, close controls, and focus-visible states

The authoritative machine-readable coverage list is in COVERAGE.json.

Safety contract

Every system follows the same bounded visual contract.

Allowed

• foreground and background colors
• border colors and widths
• bounded border radius
• bounded component padding
• font size and font weight
• bounded control heights
• focus rings
• restrained shadows
• Bootstrap component CSS custom properties

Intentionally not overridden

• display
• position
• Bootstrap grid behavior
• flex/grid layout utilities
• responsive utility behavior
• z-index
• transforms
• overflow mechanics
• fixed component widths
• JavaScript-driven state mechanics

The package verifier enforces these rules before packaging.

Current limits

• standard controls: 36–42px
• small buttons: minimum 32px
• large buttons: minimum 46px
• component radius: 0–16px

For the full policy, see OVERRIDE_POLICY.md.

CSS variables

Each override exposes a consistent --bo-* token surface. Common variables include:

:root {
  --bo-primary: ...;
  --bo-primary-hover: ...;
  --bo-surface: ...;
  --bo-surface-2: ...;
  --bo-text: ...;
  --bo-muted: ...;
  --bo-border: ...;
  --bo-radius-sm: ...;
  --bo-radius-md: ...;
  --bo-control-height: ...;
}

You may override selected tokens after the theme stylesheet when your product needs a controlled brand adjustment:

:root {
  --bo-primary: #0d6efd;
  --bo-primary-hover: #0b5ed7;
}

Keep custom values within the package's sizing/radius limits if you want to preserve the tested component contract.

Package contents

The package is intentionally small and CSS-only:

bootstrap-overrides/
├── dist/
│   ├── axis.css
│   ├── canvas.css
│   ├── cobalt.css
│   ├── ember.css
│   ├── grove.css
│   ├── ledger.css
│   ├── quartz.css
│   ├── signal.css
│   ├── tide.css
│   └── violet.css
├── preview/
│   ├── index.html
│   └── package.json
├── scripts/
│   └── verify.mjs
├── COVERAGE.json
├── OVERRIDE_POLICY.md
├── RELEASE_4.0.0.md
├── LICENSE
├── package.json
└── README.md

There are no generated SCSS sources, no Sass dependency, and no duplicate legacy theme stylesheets.

Local package preview

From the repository root, install dependencies:

npm install

Serve the repository root with any static development server and open:

/packages/bootstrap-overrides/preview/

The preview loads Bootstrap 5.3.x and then switches directly among the ten files in ../dist/. It is intended as a visual regression harness for both isolated Bootstrap components and nested application patterns.

You can also install the preview independently:

cd packages/bootstrap-overrides/preview
npm install
npm start

Local application development

The accompanying website can map packages/bootstrap-overrides/dist directly into its development assets. This lets package changes be tested before npm publication.

Recommended workflow:

edit packages/bootstrap-overrides/dist/<system>.css
        ↓
run package verification
        ↓
test package preview
        ↓
test website/components page
        ↓
publish bootstrap-overrides
        ↓
switch production consumers to the pinned CDN/package version

Verification

Run from packages/bootstrap-overrides:

npm run verify

Verification checks the package contract, including the approved ten CSS entry points and the absence of Sass/SCSS architecture.

Before publishing:

npm pack --dry-run

Review the package contents and verify that only the intended distribution files and documentation are included.

Publishing

From packages/bootstrap-overrides:

npm run verify
npm pack --dry-run
npm publish

For a release, keep these aligned:

• package.json version
• README CDN examples
• release notes
• website runtime/CDN configuration
• package metadata and displayed version

Documentation

Start here, then use the focused package documents when deeper detail is needed:

• OVERRIDE_POLICY.md — visual-only rules and safety boundaries
• COVERAGE.json — supported Bootstrap component coverage
• RELEASE_4.0.0.md — current major-release notes
• preview/index.html — local package regression gallery

The public product and documentation home is https://overrides.stickdazzle.com/.

Browser support

Browser support follows modern Bootstrap 5.3.x expectations. The themes also use modern CSS capabilities such as CSS custom properties and color-mix().

Telemetry and analytics

The published bootstrap-overrides package is CSS-only and contains no telemetry, analytics JavaScript, tracking pixels or runtime callbacks. The project website at https://overrides.stickdazzle.com/ may use product analytics to understand package discovery and documentation usage, but installing a theme CSS file does not send analytics events from a consuming application.

License

MIT. See LICENSE.

Bootstrap Overrides is a Stickdazzle developer tool for creating distinct visual systems on top of Bootstrap while preserving Bootstrap underneath.

Website: https://overrides.stickdazzle.com/