Bootstrap-to-UIF CSS Migration
This maps common Bootstrap conventions to the bundled UIF 3 CSS. It is a migration guide, not a Bootstrap compatibility promise. Visual dimensions, breakpoints, and spacing values are not necessarily identical. Do not add Bootstrap as a runtime dependency.
Component mappings
| Bootstrap pattern | UIF pattern | Migration requirement |
|---|---|---|
btn btn-primary | uif-btn | Primary is the base style |
btn btn-secondary | uif-btn uif-btn-secondary | UIF secondary is a bordered surface, not a gray filled button |
btn btn-outline-primary | uif-btn uif-btn-outline-primary | Keep the base class |
btn-sm, btn-lg | uif-btn-sm, uif-btn-lg | Add to the base button |
disabled class | Native disabled on buttons | A CSS class cannot disable behavior |
form-control, form-select | uif-input | Apply to input, textarea, or select; keep labels |
form-check | Native checkbox inside uif-selection-control | Adapt markup, not just the class name |
is-invalid | aria-invalid="true" on uif-input | Add associated uif-field-error text |
card | uif-card | Use uif-card-flush for padded child sections |
card-header, card-body, card-footer | uif-card-head, uif-card-body, uif-panel-footer | Preserve semantic header/body/footer structure |
badge bg-success | uif-badge uif-badge-success | Also supply meaningful status text |
table | uif-table | Retain caption and header scopes |
table-responsive | uif-table-wrap | Overflow wrapper, not the table itself |
navbar | uif-navbar | Adapt brand/actions markup; collapse behavior is not automatic |
data-bs-* attributes | No direct CSS equivalent | Rebuild using the documented UIF behavior contract |
Utility mappings
| Bootstrap | UIF | Notes |
|---|---|---|
d-flex | uif-flex | UIF adds a default gap |
d-none | uif-hidden | Removes content from layout and accessibility tree |
d-block | uif-block | Display only |
flex-column | uif-flex-col | Also establishes flex layout |
flex-wrap | uif-flex-wrap | Add to a flex container |
align-items-center | uif-items-center | Alignment only |
justify-content-between | uif-justify-between | Distribution only |
text-start, text-end | Feature CSS text-align: start/end | Native uif-text-left/right are physical directions |
text-center | uif-text-center | Center alignment |
m-0…5, p-0…5 | uif-m-0…5, uif-p-0…5 | UIF token scale differs; inspect spacing |
mt-*, mb-*, ms-*, me-* | Same suffix with uif- | Values 0–5; start/end are logical |
px-*, py-* | uif-px-*, uif-py-* | Values 0–5 |
gap-1…5 | uif-gap-1…5 | Not necessarily the same pixel values |
w-100 | uif-w-full | Full width |
visually-hidden | uif-sr-only | Retains accessible content |
row + col-6 | uif-form-grid-12 + uif-col-6 | CSS grid, not Bootstrap flex rows/gutters |
col-md-6, d-lg-none | Feature media-query CSS | Do not invent prefixed responsive aliases |
There is no blanket conversion for every Bootstrap utility, JavaScript plugin, assessment layout, or theme class. See Utilities for actual responsive behavior and Forms for validation semantics.
Migration sequence
Inventory the existing page's Bootstrap and application-only classes. Replace one component at a time, compare its markup and behavior, then remove unused dependencies only after checking the entire shell. Verify focus, keyboard actions, errors, mobile layouts, and printed output. A screen that looks correct while Bootstrap is still loaded has not proven that migration is complete.