Previewing and Exporting your Designs

Bootstrap Studio has two powerful features - Preview and Export, with which you can test your design in real time across multiple browsers, and export your work as a beautiful stand-alone website.

Preview

Bootstrap Studio has a powerful feature called Preview. With it, you can open your design in multiple web browsers and devices, and every change you make within the app will be shown instantaneously everywhere. Here is how to start it:

  1. Hit the Preview button from the Main toolbar.
  2. In the dialog that is shown, hit Enable Preview and copy one of the URLs.
  3. Open this URL on the devices/browsers that you wish to test. This URL is only available in your local network and can't be seen from outside. 

Now you can experiment with a design and test it at the same time. No need to switch to a web browser and hit the refresh button, which is a great productivity increase. In a team setting, Preview is a great tool for collecting feedback from colleagues.

Exporting

Once you are happy with a design, you can export it into regular HTML+CSS. Just hit the Export button and choose a folder on your computer. Bootstrap Studio will generate a number of files which are a perfect representation of your design.

You can also choose to minify your JS and CSS, or to use CDN versions of jQuery, Bootstrap and the icon fonts for extra performance. For the technically minded folks, there is also the option for configuring an Export Script.

After you hit the Export button, Bootstrap Studio exports your design as clean and well-structured HTML. It looks as if a professional front end developer had written it by hand!