Skip to content
NuvoUI

NuvoUI vs Bootstrap

Bootstrap is a component framework: prebuilt components, JavaScript plugins and utilities, usable straight from a CDN. NuvoUI core is a foundation layer in SCSS: utilities, apply() mixins and theme tokens for building your own components. This page compares the stable Bootstrap 5.3 line.

Who should pick which

Pick Bootstrap if

  • You want finished components now: Bootstrap ships component classes such as .card and .btn and JavaScript plugins for interactive parts such as dropdowns, popovers and tooltips.
  • You want no build step: compiled CSS and JavaScript load from a CDN or npm, and Sass is only needed to customise.
  • You want a mature, stable line with a long release history [15][16].
  • You need broad browser support defined by a published browserslist, back to Safari 12 and Chrome 60 [18].

Pick NuvoUI if

  • You build your own components or design system and want a foundation layer (utilities, mixins, tokens) rather than prebuilt components to override.
  • You want every utility as a mixin with any value, state and breakpoint: @include apply(p(1.5rem), shadow(md) hover, p(8) lg).
  • You want Sass modules: NuvoUI is configured with @use ... with (...). Bootstrap 5.3 examples use @import, and current Dart Sass shows deprecation warnings when compiling its source.
  • You want one stylesheet for both directions: logical utilities follow dir, with no separate RTL build.
  • You want an inverse section (data-theme="inverse") that always takes the opposite of the page theme, and compile-time errors for unknown keys.

Side by side

TopicBootstrapNuvoUI
PhilosophyA component framework with utilities. Its approach page states that components should be responsive and mobile-first [1].A foundation layer: utilities, mixins and tokens with human-readable names. No component classes such as .card or .btn; plain HTML buttons and form fields get base styles.
SyntaxComponent classes (card, card-body, btn btn-primary) [2][3]. Responsive utilities put the breakpoint in the middle: d-sm-flex, me-md-3 [4].Utilities with breakpoint suffixes (p-8@lg, flex col, between), or your own BEM classes built with apply().
Custom valuesNew utilities are generated through the Sass utility API and its $utilities map [5].Any value through mixins, directly in your component CSS: apply(p(13px), bg(#bada55)). A unitless number is a scale key; a value with a unit is used as written.
CustomisationEvery Sass variable and map has !default and can be overridden before Bootstrap is imported [6]. $enable-* options switch features such as shadows, gradients and dark mode [7].One @use ... with (...) block: $brand, scale maps, theme override maps and feature flags, validated at compile time with errors that name the valid options.
Theming and dark modeColour modes since 5.3.0, toggled on <html> or on specific components and elements with data-bs-theme [8].data-theme="light", "dark" or "inverse" on any element, with an operating system fallback. A [data-contrast="high"] hook applies $high-contrast-light and $high-contrast-dark override maps; both maps are empty by default.
RTLSet dir="rtl" and load the separate RTL stylesheet (bootstrap.rtl.min.css), generated with RTLCSS. Directional classes use start and end, such as .ms-3 [9].Logical utilities and mixins (ms, me, ps, pe, start-*, end-*, border-s, rounded-s-*, text-start) in the same stylesheet, alongside physical ones for content that must not mirror.
Design tokensCSS custom properties prefixed with bs-, defined on :root [10].--nu-* custom properties for surfaces, text, borders, focus, brand and status roles, the palette and every scale. Classes and mixins output var(--nu-*); token(name) raises an error for an unknown name.
Build requirementsNone for the compiled files (CDN or npm). Compiling the source needs a Sass compiler and Autoprefixer [11]; current Dart Sass prints deprecation warnings that do not stop compilation [6].Dart Sass 1.79 or later (below 2.0) is required: core is used as SCSS source. No JavaScript, no runtime and no PostCSS plugin.
Bundle approachInclude all of Bootstrap or import only the parts you need [6]. There is no prebuilt PurgeCSS setup; the docs point to community guides [12].With $generate-utility-classes: true every configured class is emitted (about 1 MB minified, 93 KB gzipped with the defaults), so purge unused classes or switch feature flags off. Mixin-only use emits what you write plus about 43 KB of base CSS (tokens, reset, base elements, tooltips) per compiled entry.
JS componentsJavaScript plugins with no jQuery requirement since v5 [13]. Dropdowns, popovers and tooltips depend on Popper [13], which the bundle includes [14].None. Core is a foundation layer with no component library; it includes CSS-only tooltips.
LicenceCode MIT, documentation CC BY 3.0 [17].MIT.

The same component in both

The basic card from the Bootstrap documentation, and the same card in NuvoUI as BEM classes built with apply(). Bootstrap provides the card; with NuvoUI you write it once in your own stylesheet, and every value reads a theme token.

Bootstrap: HTML (card example from the docs, without the image)
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title
      and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
NuvoUI: HTML
<div class="card">
  <h5 class="card__title">Card title</h5>
  <p class="card__text">Some quick example text to build on the card title
    and make up the bulk of the card's content.</p>
  <a href="#" class="card__action">Go somewhere</a>
</div>
Bootstrap: Sass customisation
// Include any default variable overrides here
$body-bg: #000;
$body-color: #111;

@import "../node_modules/bootstrap/scss/bootstrap";
NuvoUI: SCSS with apply()
@use "@nuvoui/core" as * with (
  $brand: #4361ee
);

.card {
  @include apply(
    flex, col, gap(3), p(6),
    bg(surface), rounded(lg), border(1),
    shadow(md) hover
  );

  max-width: 18rem;
}

.card__title {
  @include apply(font-size(lg), font(semibold));
}

.card__text {
  @include apply(text-color(muted));
}

.card__action {
  @include apply(
    self-start, px(4), py(2), rounded(md),
    bg(brand), text-color(on-brand), bg(brand-hover) hover
  );
}

Moving from Bootstrap

  1. Rebuild components as your own classes with apply(), or as utility markup. Core has no .card or .btn. See apply().
  2. Move the breakpoint from the middle to the end: d-md-flex becomes flex@md and me-md-3 becomes me-3@md. See Spacing and Media queries.
  3. Replace !default overrides before @import with one @use "@nuvoui/core" with (...) block. See Configuration.
  4. Replace data-bs-theme with data-theme, and --bs-* variables with --nu-* tokens. See Theming and Tokens.
  5. Drop the separate RTL stylesheet: use logical utilities such as ms, pe and text-start. See Spacing.
  6. Keep a JavaScript library for interactive components; NuvoUI core has none. Core tooltips are CSS only: see Tooltips.

Sources

Every statement about Bootstrap on this page comes from its official documentation or repository. Statements about NuvoUI come from the core source, its changelog and the core documentation.

  1. [1] Bootstrap 5.3: Approachhttps://getbootstrap.com/docs/5.3/extend/approach/
  2. [2] Bootstrap 5.3: Cardshttps://getbootstrap.com/docs/5.3/components/card/
  3. [3] Bootstrap 5.3: Buttonshttps://getbootstrap.com/docs/5.3/components/buttons/
  4. [4] Bootstrap 5.3: Utilities for layouthttps://getbootstrap.com/docs/5.3/layout/utilities/
  5. [5] Bootstrap 5.3: Utility APIhttps://getbootstrap.com/docs/5.3/utilities/api/
  6. [6] Bootstrap 5.3: Sasshttps://getbootstrap.com/docs/5.3/customize/sass/
  7. [7] Bootstrap 5.3: Optionshttps://getbootstrap.com/docs/5.3/customize/options/
  8. [8] Bootstrap 5.3: Color modeshttps://getbootstrap.com/docs/5.3/customize/color-modes/
  9. [9] Bootstrap 5.3: RTLhttps://getbootstrap.com/docs/5.3/getting-started/rtl/
  10. [10] Bootstrap 5.3: CSS variableshttps://getbootstrap.com/docs/5.3/customize/css-variables/
  11. [11] Bootstrap 5.3: Downloadhttps://getbootstrap.com/docs/5.3/getting-started/download/
  12. [12] Bootstrap 5.3: Optimizehttps://getbootstrap.com/docs/5.3/customize/optimize/
  13. [13] Bootstrap 5.3: JavaScripthttps://getbootstrap.com/docs/5.3/getting-started/javascript/
  14. [14] Bootstrap 5.3: Get startedhttps://getbootstrap.com/docs/5.3/getting-started/introduction/
  15. [15] Bootstrap: Versionshttps://getbootstrap.com/docs/versions/
  16. [16] Bootstrap releaseshttps://github.com/twbs/bootstrap/releases
  17. [17] Bootstrap 5.3: Abouthttps://getbootstrap.com/docs/5.3/about/overview/
  18. [18] Bootstrap 5.3: Browsers and deviceshttps://getbootstrap.com/docs/5.3/getting-started/browsers-devices/
Read the documentationAll comparisons