Migration

From Bootstrap

Bootstrap is pre-composed and opinionated in a different direction. Moving to Nova + Tailwind trades pre-built components for composable primitives with sharper craft.

Overview

Expect two changes: your utility class vocabulary shifts to Tailwind's, and pre-composed Bootstrap components become Nova React primitives.

Install alongside

Add Nova without removing your current library. Migrate page-by-page.

tsx

bun add @novix-ui/react tailwindcss
# remove bootstrap.css after the migration finishes

Component mapping

From	Nova	Notes
.btn.btn-primary	Button	Variants: primary/secondary/outline/ghost.
.form-control	Input + Label	Composable — no monolith wrapper.
.card	Card	Sculpted depth and Moon-Edge highlight.
.badge	Badge	Same intent, tighter typography.
.d-flex .gap-2	flex gap-2 (Tailwind)	Utilities are 1:1 in most cases.

Code diff

Before

tsx

<button type="button" class="btn btn-primary d-inline-flex align-items-center gap-2">
  <i class="bi bi-search"></i>
  Search
</button>

After (Nova)

tsx

import { Button } from "@novix-ui/react";
import { Search } from "lucide-react";
 
<Button leadingIcon={<Search />}>Search</Button>

Common traps

Bootstrap's grid uses 12 columns. Tailwind uses 12 by default too — but you'll typically reach for CSS grid + auto-fit for cards. Rewrite grids for the new mental model.
Bootstrap's modal uses jQuery in older versions. Use the Modal workflows recipe with Radix Dialog.
Bootstrap icons (bi) → lucide-react. Both use similar naming for common glyphs.