Streaming live at 10am (PST)

Create a Bootstrap website using Webflow Designer + (one line of custom code)

Introducing my new experimental project: webflow-bootstrap

About

Use JUST ONE LINE of custom code on your site to convert a Webflow site with Webflow components into a Bootstrap-themed website.

Do you:

  • prefer Bootstrap’s default design over Webflow?
  • just want to quickly launch a minimal site without worrying much about styling individual components
  • want a 1140px-width Bootstrap container / or dislike the default 940px max-width Webflow container?
  • find it difficult to use dropdowns in the Webflow navbar?
  • etc…

Demo

Compare how your site could look before and after using this

Before: http://webflow-bootstrap-before.webflow.io
After: http://webflow-bootstrap.webflow.io

Instructions

  1. Use the instructions on this forum thread to insert the script file webflow-bootstrap.js in this repo, into your project’s Site Settings > Footer Code.

    It should be as simple as this:
    <script src="https://cdn.rawgit.com/samliew/webflow-bootstrap/master/webflow-bootstrap.js"></script>

  2. Save and publish.

Support

Please use the issue tracker in the repo. Pull-requests welcome.

6 Likes

To preview this on existing published sites temporarily without actually modifying your project, simply paste this in your web browser’s Developer Console:

$.getScript('https://cdn.rawgit.com/samliew/webflow-bootstrap/master/webflow-bootstrap.js')

2 Likes

Haha it works, that’s fun :slight_smile:

1 Like

nice play!!! good test!

HEy this is great,

but i am having some issues with it. It make my navigation go really weird and buttons show when i have hidden them on one break point?

thanks Andrew

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.

1 Like

Hi there,

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!?

Thank you for any opinions.

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.

Thank you for this insight, Jeff (@webdev)

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.

Thank you Jeff (@webdev)!

I reckon by updating you mean “exporting and integrating the other CMS”, right?

To clarify, this means staying clear of applying an interaction to a ’ Selected Element’, for example, right?

Thank you.

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.

I see what you’re saying. Very helpful. Thank you for your time!

1 Like