To preview this on existing published sites temporarily without actually modifying your project, simply paste this in your web browser’s Developer Console:
This is cool! Now if only doing this would allow you to view the effected styles live in the Designer as you were creating layouts and then allow you to create any additional styles that would overwrite the Bootstrap styles where needed to make it unique on the surface, but still based on the Bootstrap grid, etc.
I’m supposed to setup a prototype of a website on Webflow. It’s likely fo the code to be exported from Webflow in order for the site to be set up on the client’s own CMS.
The client’s CMS uses Bootstrap, and I wonder whether Bootstrap can be used in any sensible way to develop the design on Webflow.
Am I right that @samliew’s above suggestion of applying Bootstrap won’t actually allow me to see the effect in the WF Designer? That would make things kind of hard, right?
The client believes that it might make it easier to port the WF prototype if Bootstrap was used. Is that even true!?
If the client has Bootstrap components wired into the CMS, then I would think you would just design it via code.
That code simply adds bootstrap CDN assets, then removes and replaces classes at client runtime. This would not display in the designer.
I would consider it a waste of time to build the site in Webflow, then convert all the styles to work with Bootstrap. You could do it, but it would take less time for me just to design it using Boostrap natively. It all depends on your skillsets. I often do wireframe in WF then complete the design off WF using other CMS’s and the base WF CSS. Specifics depend on the project.
So, could another way to look at it be the following?
Forget about Bootstrap ––> so: Design in Webflow and then just keep the Webflow CSS and integrate with their CMS, not using Bootstrap. Then, the Webflow development should be an okay investment, right?
Updating can be a challenge. Personally I would avoid investing heavily in interactions. Make sure you are targeting classes. I recently used Pinegrow to convert a Webflow design to Wordpress for a client that wanted that platform. That made the process easy to update. All depends on what CMS they are using.
I am saying that once you convert a site over to another CMS, doing further design updates can be a challenge to migrate. If you refactor design elements for example.
It can be hard to keep track of interactions bound to elements via data attributes in an external system. If you update interactions in your Webflow design you have to bring them into the deployed design where the CMS is. So I suggest using interactions bound to classes. I prefer to use GSAP for interactions, applied once a site is migrated, then maintain it there. This really all depends on your skills. I am quite comfortable just using an editor to design, build and maintain a site.
@samliew It’s been a while since you first posted this - does this still work? Can I change a Webflow website to the Bootstrap framework through this approach?
What would be awesome is if Webflow allowed loading a framework of your choice and then e.g. instead of (IMO wrong) naming like sections, containers (and sections ARE containers!), it would be rows and columns… and then classes from Bootstrap - even if it was only ver. 5.x.
Has anyone heard about possibilities like that?
Using JS IMO is a bit automated and not so efficient for that… and I mean the interface would be altered with bootstrap stuff…
