Using Bootstrap 3 with Webflow is possible

[mention79]

I was just wondering if anyone had experimented with importing other frameworks into Webflow such as Bootstrap 3 or Foundation and then using Webflow to start the design process by designing a single column layout in the visual editor and then once the single column layout was done, exporting the code out of webflow to then work on in another code editor such as sublime text, coda, brackets, dreamweaver etc.

I just did a brief experiment by importing the Bootstrap 3 CSS by putting it in the head code in the custom code section. Here’s the code that links to MaxCDN version:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

And then put the link to the javascript in the footer code in the custom code section:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Then back in the visual editor I just used divs so that they wouldn’t get any extra classes added to them and gave them the bootstrap classes such as container for the grid container, the row and col-sm-4 for a 3 column layout on tablet size and above.

These don’t do anything until you export the code (or publish as well I’m assuming). But once you do export the code and open the html, the Bootstrap 3 css then works and for example the one column design will become responsive and be whatever you’ve specified using the bootstrap classes on tablets and above. So in the above example, the once column design on mobile becomes 3 columns on tablets and above.

So from there you can use your code editor of choice to fine tune the non mobile responsive layouts.

Anyone else tried something similar, as I like the idea of being able to use other grid systems within webflow, and this seems to be one potential method. But am interested to see if anyone else has found an alternate method?

[mention79]

After some further testing this method seems to be working quite well, as you can design the single column layout in webflow using divs and styling them with the Bootstrap 3 classes. And then once you export the code, if you open it in Dreamweaver CC for example it has Bootstrap 3 built into it nowadays, and so you can simply delete the webflow.css and replace it with the Bootstrap MaxCDN link that you’ve already got in place just before the closing head tag. So you have to move that to where the webflow.css link was sitting and then you can use the visual editor in Dreamweaver CC live view to move the Bootstrap grid to where you want it at the different media querie sizes, as it has handles on the sides of each column. So you can add offsets, make boxes different sizes etc.

I think this is brilliant, as it means I can use webflow for most of the process of setting up the styling of a website and getting the mobile view correct, and then export it to a code editor to adjust the responsive views and then use in whatever CMS is suitable for the client.

[olexalex (Alex)]

Sounds very interesting! Please keep us posted regarding the workflow of using Bootstrap in Webflow.