Bootstrap Component Generator
Ready-to-paste Bootstrap 5 markup for 16 components — button, card, alert, badge, navbar, modal, dropdown, nav tabs, list group, accordion, breadcrumb, pagination, progress, spinner, form, toast — with contextual colour, size, outline / pill options, a live preview, framework output (HTML / JSX / Vue) and a class breakdown.
What this tool does
It writes Bootstrap 5 markup for common components, tuned by a few options, and renders it live using the official Bootstrap CSS and bundle from a CDN.
Options
A contextual colour (primary, secondary,
success, danger, warning,
info, light, dark), a size
(btn-sm / default / btn-lg), an outline
toggle for buttons and badges, and a pill / rounded toggle.
Framework output
Plain HTML, JSX (class becomes className,
void elements self-closed), or a Vue <template>.
The Bootstrap classes are identical — only the host syntax changes.
Class breakdown
Every class in the output is grouped — component classes, layout, spacing and sizing utilities, colour utilities, and interaction hooks — so you can see what each part contributes.
Privacy
Everything runs in your browser. The preview loads Bootstrap from a CDN; nothing you type is sent anywhere.