Migrate from Bootstrap to boodoo

Upgrading from Bootstrap to boodoo is fast and painless. Because boodoo preserves standard grid and component semantics while adding modern utility classes and 0-dependency JS, most templates work with minimal adjustments.

Curious about how they compare first?

Review our deep dive on architectural differences, runtime sizes, and features.

View boodoo vs Bootstrap →

Step 1: Replace Stylesheet & Script Imports

Swap the Bootstrap CSS and JS tags with boodoo's CDN links or npm imports:

<!-- Before: Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- After: boodoo (No Popper.js needed, pure zero-dependency vanilla JS) -->
<link href="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo.min-f5986ea1.css" rel="stylesheet">
<script src="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo-22f6ff5d.js"></script>

Step 2: Component & Class Name Mapping

Almost all core classes work identically in boodoo:

Bootstrap Class	boodoo Equivalent	Notes
`.container`, `.row`, `.col-*`	`.container`, `.row`, `.col-*`	Identical 12-column mobile-first grid system
`.btn`, `.btn-primary`, `.btn-outline-*`	`.btn`, `.btn-primary`, `.btn-outline-*`	Enhance anytime with `.ripple` or `.elevation-2`
`.card`, `.card-body`, `.card-header`	`.card`, `.card-body`, `.card-header`	Supports `.card-hover` and subtle elevation borders
`.badge`, `.badge-primary` / `.bg-primary`	`.badge`, `.bg-primary`, `.badge-soft-primary`	Includes pastel soft-variant badges out of the box
`.modal`, `.modal-dialog`, `.modal-content`	`.modal`, `.modal-dialog`, `.modal-content`	Zero changes needed; HTML5 dialog compliant
`.dropdown`, `.dropdown-menu`, `.dropdown-item`	`.dropdown`, `.dropdown-menu`, `.dropdown-item`	No external Popper.js required for positioning

Step 3: Data Attribute JS API

If you use declarative toggles, boodoo supports both standard data-boodoo-* and standard data-bs-* attributes:

<!-- Dropdown toggle in boodoo -->
<button type="button" class="btn btn-primary" data-boodoo-toggle="dropdown">
  <span>Options</span>
</button>

<!-- Modal trigger in boodoo -->
<button type="button" class="btn btn-primary" data-boodoo-toggle="modal" data-boodoo-target="#myModal">
  <span>Launch Modal</span>
</button>

Step 4: Unlock Modern boodoo Superpowers

Once migrated, you can immediately begin utilizing features Bootstrap doesn't provide natively:

150+ Functional Utility Classes: Precise gap, positioning, sizing, and typography utilities inspired by Tailwind.
Material Elevation & Motion: Add tactile depth with .elevation-1 through .elevation-5 and keyframe animations like .anim-pulse.
Next-Gen Native UI: Draggable desktop titlebars (-webkit-app-region: drag) and Photon layout panes for Electron / Tauri.