At a glance
- Template import
- Not possible directly. Convert the rendered HTML and CSS.
- Grid and gutters
- .row / .col-* and --bs-gutter-x become flex layouts with the same spacing.
- Utilities
- my-3, pt-4, text-center and friends keep Bootstrap's values (not Tailwind's).
- Interactive parts
- Navbar collapse, dropdowns and tabs work after paste via a small scoped script.
- Carousels
- Constant-speed logo carousels become a CSS marquee; sliders paste on their first slide.
- Bootstrap in Webflow
- Not needed. The styles are written onto Webflow classes.
Why Bootstrap and Webflow don't mix directly
Bootstrap styles a page through hundreds of shared classes (.row, .col-md-6, .px-4, .btn-primary) and relies on its JavaScript for the navbar, dropdowns, tabs and carousels. Webflow puts styles on your own classes and has its own components.
You could load Bootstrap's CSS and JS into Webflow with custom code, but then nothing is editable in the Style panel, and the two systems fight (Webflow's base styles change Bootstrap's defaults).
Converting gives you the look without the framework. FlowPaste recognises Bootstrap's utilities as Bootstrap (so they keep Bootstrap's values instead of being treated as Tailwind), resolves the grid's CSS variables, and writes the final styles to Webflow classes. Components that need JavaScript get a small script scoped to the pasted section.
Ways to do it, compared
| Method | Editable in Webflow | Responsive | Time for one page | Best for |
|---|---|---|---|---|
| Load Bootstrap CSS/JS in Webflow custom code | Partly: structure only, styles live in Bootstrap | Yes | Hours of fixing conflicts | Not recommended |
| Rebuild by hand in the Designer | Yes | Yes, if you build it | 2–6 hours | Small pages, or a full redesign |
| Convert with FlowPaste | Yes: native elements and classes | Yes | Under a minute per section | Templates, landing pages, Bootstrap-based CMS themes |
How to convert a Bootstrap page to Webflow
Time: about 5 minutes per page. You need: the template files or the live page, the FlowPaste Chrome extension, a Webflow site in the Designer.
Choose: code or live page
For a downloaded template, open it in Chrome (double-click index.html) and use Live Capture: that brings Bootstrap's CSS along automatically. For a single section of code, paste it with its <link> to Bootstrap's CSS into the Convert tab.
Capture the section
Click the FlowPaste icon → Capture an element (or ⌥⇧C / Alt+Shift+C). Press ↑ until the outline covers the section or the navbar, then click.
TipAllow site access so FlowPaste can read Bootstrap's CSS from the CDN; without it, styles are copied at the current width only.
Paste into Webflow
In the Designer, click where it goes and press ⌘V (Ctrl+V). The grid, spacing and colours match the template.
Check the navbar and widgets
Preview or publish to staging: the mobile menu, dropdowns and tabs open with the small script that came along (it runs on the published site, and in Preview when custom code is on).
Clean up class names
Bootstrap class names that describe layout (.row, .col-md-6) are kept as classes. Rename them to your own system if you like, or keep them for familiarity.
What comes across
| In Bootstrap | In Webflow | Notes |
|---|---|---|
| .container, .row, .col-* | Div Blocks with flex, widths per breakpoint | Gutters from --bs-gutter-x are resolved |
| Spacing and text utilities (m-*, p-*, text-center) | Values on the element's classes | Bootstrap's values, not Tailwind's |
| Breakpoints sm/md/lg/xl | Webflow mobile / tablet / desktop / large | Nearest Webflow breakpoint; noted when snapped |
| .btn, .btn-primary, :hover | Link or Button with Hover state | |
| Navbar with collapse | Div-based navbar + small toggle script | Not Webflow's Navbar element |
| Dropdowns, tabs, collapse | Elements + hover CSS and click script | Scoped to the section |
| Carousel (logos) | Looping CSS marquee | Pauses on hover |
| Carousel (slides) | First slide(s), static | Use Webflow's Slider for a working one |
| Bootstrap Icons / inline SVG | Embed or font, as loaded | |
| Lists with non-<li> children (navbar togglers) | Div Blocks | Webflow only allows List Items in Lists |
Problems and fixes
Spacing between columns is gone
Allow site access and capture again. Bootstrap sets gutters with CSS variables in its stylesheet, which FlowPaste needs to read.
The navbar paste is refused
Update FlowPaste. Older versions created an Embed over Webflow's size limit or a List with non-list children; both are fixed.
The mobile menu doesn't open in the Designer
Scripts don't run on the canvas. Test it in Preview with custom code enabled, or on the published staging site.
Styles changed after pasting into a site that also loads Bootstrap
Remove Bootstrap from the site's custom code. The converted section has its styles on Webflow classes and doesn't need it.
After you paste
- Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
- Test the mobile menu, dropdowns and tabs on the published staging site.
- Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
- Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
- Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
Questions
Can I use Bootstrap in Webflow?
You can load it with custom code, but it fights Webflow's styles and nothing is editable in the Style panel. Converting the design to Webflow classes is cleaner.
Does FlowPaste confuse Bootstrap with Tailwind?
No. Utility names look alike (my-3, text-center), but when the page's CSS already defines them, FlowPaste uses that CSS instead of compiling Tailwind.
Do Bootstrap dropdowns and the mobile menu still work?
Yes. They get hover CSS and a small click script, scoped to the pasted section.
Can I convert a Bootstrap theme from ThemeForest?
Yes, if your licence allows using the design on another platform. Open the theme's HTML in Chrome and capture section by section.
What Bootstrap versions work?
We test with Bootstrap 5. Bootstrap 4 uses mostly the same classes and should convert the same way, but we have not tested it separately.