Streaming live at 10am (PST)

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

#1

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
Bootstrap 4 Announced
#2

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')

1 Like
#3

Haha it works, that’s fun :slight_smile:

#4

nice play!!! good test!

#5

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

#6

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.

#7