Convert a Bootstrap page to Tailwind CSS
Moving a page off Bootstrap by hand means looking up what every btn, row, and col-lg-6 does and retyping it in Tailwind. This converter handles the lookup for you: paste a page URL to get a single HTML file where each element carries the Tailwind classes needed to reproduce its original look.
What happens to Bootstrap
Bootstrap's stylesheet is replaced by utility classes on each element. Component classes like btn btn-primary turn into the padding, color, border, and radius utilities they represent, while grid classes like col-lg-6 become width and flex utilities.
Bootstrap breakpoints carry over at their exact widths. 768px maps to md:, and widths Tailwind does not include by default, like 992px and 1200px, become min-[992px]: and min-[1200px]:. Hover, focus, and disabled styles convert to hover:, focus-visible:, and disabled: variants.
Most Bootstrap class names remain on elements as hooks, so your scripts and test selectors still find them. The page loads Tailwind v4 by default, or v3 if your project uses it, with Preflight off.
Before and after
A Bootstrap button, before and after (v4, trimmed)
<!-- before -->
<a class="btn btn-primary btn-lg" href="#">Get started</a>
<!-- after -->
<a class="btn btn-primary btn-lg inline-block py-[0.5rem] px-[1rem]
text-[1.25rem] leading-[1.5] text-[#fff] text-center no-underline
rounded-[0.5rem] bg-[#0d6efd] hover:bg-[#0b5ed7]
focus-visible:shadow-[0_0_0_0.25rem_rgba(49,132,253,.5)]
disabled:opacity-65 ..." href="#">Get started</a>Values are copied exactly as arbitrary values like bg-[#0d6efd] and py-[0.5rem], so the button looks the same without Bootstrap loaded.
The grid keeps Bootstrap's breakpoints
<!-- container -->
w-full mx-auto px-[calc(1.5rem*.5)]
min-[576px]:max-w-[540px] md:max-w-[720px] min-[992px]:max-w-[960px]
min-[1200px]:max-w-[1140px] min-[1400px]:max-w-[1320px]
<!-- col-lg-6 -->
shrink-0 w-full max-w-full px-[calc(1.5rem*.5)]
min-[992px]:grow-0 min-[992px]:basis-auto min-[992px]:w-[50%]768px lines up with Tailwind's md:, so it uses md:. Bootstrap's other widths stay exact instead of being rounded to the nearest Tailwind breakpoint, so the layout changes at the same points as before.
Utilities marked !important (v4)
<!-- before -->
<div class="d-none d-md-block">
<!-- after -->
<div class="d-none d-md-block hidden! md:block!">Bootstrap marks its utility classes !important, and the output preserves that behavior using Tailwind's important modifier.
Exports and pricing
Converting is free and needs no account. Copy HTML, Download, and Deploy to ship.page require a free account, which includes 3 exports a month. Re-exporting the same conversion does not count twice. Pro is $4/mo with unlimited exports.
Deploy to ship.page puts the converted page on its own link in one click, letting you share the Tailwind version before touching your codebase. Results are kept for 24 hours.
Check before you ship it
Check
Review the match score and toggle between the side-by-side screenshots to see where the Tailwind version differs from the original Bootstrap page before copying anything.Check
Export with Include page scripts turned on, then test the navbar toggle, dropdowns, and modals. They open and close like the original, but the dimmed backdrop behind modals and offcanvas panels is missing, and tooltips and popovers appear unstyled.Check
Resize the window through Bootstrap's breakpoints at 576, 768, 992, 1200 and 1400px to compare the layout at each size.Check
Check images and fonts. They still load from the original site, so copy them over if the page needs to stand on its own.Questions
Is there a free Bootstrap to Tailwind converter?
Yes. Converting is free with no signup: paste a URL, pick v4 or v3, and check the result against the original. Exporting requires a free account with 3 exports a month, or Pro at $4/mo for unlimited exports.
Can it convert a whole Bootstrap site?
It converts one page per URL. For a full site, convert your key templates, such as the home page, a content page, and a form, then reuse those classes across your components.
My Bootstrap site isn't online. Can I still convert it?
Yes. Drop the built files onto ship.page to get a free https://<slug>.shipped.run link without an account, then paste that link into the converter.
Do dropdowns and modals still work?
Yes, if you turn on Include page scripts when you export. This keeps Bootstrap's JavaScript, so dropdowns, modals, tabs, accordions, and the mobile navbar open and close like the original. Modals show without the dimmed backdrop, and tooltips and popovers appear unstyled. With page scripts off, rebuild interactive parts with Tailwind or your framework.
Should I pick Tailwind v4 or v3?
Pick the version your project uses; v4 is the default. Turn on the prefix if the classes need to sit next to existing ones: v4 output uses twfy:flex and v3 output uses twfy-flex.
Convert your Bootstrap page
Paste the URL, pick v4 or v3, and compare the result with the original. Converting is free and needs no account.