Migration from Bootstrap

LombokCSS covers the same component surface as Bootstrap, so most migrations are a class rename plus dropping the Sass/JS bundle. This page maps the concepts and the classes.

Mental model differences

Three things change how you think:

Theming is runtime, not build-time. Bootstrap recompiles Sass variables; LombokCSS reads CSS custom properties, and a whole look is one data-style attribute — no build step to re-theme.
Utilities are first-class. Like Bootstrap 5 utilities, but you can also drop into a Tailwind-ish flow (flex items-center gap-4) without leaving the framework.
Less JavaScript. Accordions and modals are native (<details>, <dialog>); the optional 2 KB script only wires dropdowns, tabs, toasts, carousels, drawers and table sort.

Class map

Bootstrap	LombokCSS	Notes
`btn btn-primary`	`btn btn-primary`	Same. Variants: `btn-secondary/outline/soft/ghost/link/danger`.
`btn-lg / btn-sm`	`btn-lg / btn-sm`	Same names.
`btn-group`	`btn-group`	Same.
`card / card-body / card-title`	`card / card-body / card-title`	Same; also `card-header/footer/text`.
`badge bg-primary`	`badge badge-primary`	Pill: `badge-pill`.
`alert alert-success`	`alert alert-success`	Same.
`form-control`	`input` / `textarea`	Or go classless — bare inputs are styled.
`form-select`	`select`	Same idea.
`form-check / form-check-input`	`check` + native input	Themed via `accent-color`.
`form-switch`	`switch`	Markup differs slightly (see Forms).
`is-invalid / invalid-feedback`	`is-invalid / error-text`	Plus native `:user-invalid` with zero JS.
`input-group / input-group-text`	`input-group / input-addon`	Same concept.
`navbar / navbar-nav / nav-link`	`navbar / navbar-nav` + `a`	Mobile toggle: `navbar-toggle`.
`nav nav-tabs`	`tabs`	Use ARIA `role="tab"`.
`accordion`	`accordion` + `<details>`	Native, no JS.
`dropdown / dropdown-menu / dropdown-item`	`dropdown / dropdown-menu / dropdown-item`	Toggle via `data-dropdown-toggle`.
`modal` (+ JS)	`dialog.modal` + `modal-card`	Native `<dialog>`; open with `data-modal-open`.
`toast`	`Lombok.toast()`	JS helper creates the region.
`offcanvas`	`drawer` + `drawer-overlay`	`data-drawer-open`.
`breadcrumb / pagination`	`breadcrumb / pagination`	Same.
`list-group / list-group-item`	`list-group / list-group-item`	Same.
`progress / progress-bar`	`progress > .bar`	Width via inline `inline-size`.
`spinner-border`	`spinner`	Same idea.

Grid & layout

Replace the 12-column row/col grid with CSS grid utilities (or flex). It is terser and needs no .row wrapper.

col

<!-- Bootstrap -->
<div class="row">
  <div class="col-md-4">…</div>
  <div class="col-md-4">…</div>
  <div class="col-md-4">…</div>
</div>

<!-- LombokCSS -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
  <div>…</div><div>…</div><div>…</div>
</div>

Theming

Drop the Sass pipeline. Override CSS variables instead, and pick a look with data-style.

// Bootstrap (build-time Sass)
$primary: #e11d48;
@import "bootstrap";

/* LombokCSS (runtime CSS variables) */
:root { --lc-accent:#e11d48; --lc-radius:4px; }
<html data-style="resonant-stark" data-theme="dark">

JavaScript

Bootstrap's data-bs-* attributes and JS plugins become small data-* hooks (or native elements):

<!-- Bootstrap -->
<button data-bs-toggle="modal" data-bs-target="#m">Open</button>

<!-- LombokCSS -->
<button data-modal-open="m">Open</button>
<dialog class="modal" id="m">…</dialog>

Step-by-step

Swap the stylesheet/script links for lombok.min.css (+ optional lombok.js).
Rename component classes using the table above (most are identical).
Replace .row/.col-* with grid grid-cols-* / col-span-* or flex utilities.
Convert data-bs-* triggers to the data-* hooks (modal, dropdown, drawer) or native elements.
Move Sass variable overrides to CSS custom properties on :root; choose a data-style.
Delete the Bootstrap + Popper bundles.

Gotchas

No jQuery/Popper. Tooltips/popovers are CSS/JS-light; positioning is simpler and may need tweaks for edge cases.
Utilities aren't 1:1. LombokCSS ships a focused utility set; check the Utilities page for exact names (e.g. spacing uses a token scale).
Logical properties. If you had LTR-only overrides using left/right, switch to inline-start/inline-end to keep RTL working.
Color modes. Dark mode is data-theme (or OS), not a separate stylesheet.