Bootstrap Studio
Bootstrap Studio is a powerful desktop app for creating responsive websites using the Bootstrap framework. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic HTML. Bootstrap Studio works on Windows (7, 8 and 10), macOS (10.10 and up) and many Linux distributions (including Ubuntu, Debian and Fedora).
Bootstrap Studio has a beautiful and powerful interface, which is built around the simplicity of drag and drop. This makes it the perfect tool for prototyping and designing web pages and apps.
Bootstrap Studio comes with a number of premium, fully responsive templates that you can customize. Each template consists of multiple pages and widgets you can pick-and-match into the perfect website.
How can I edit HTML in Bootstrap Studio?
Bootstrap Studio knows which Bootstrap components can be nested in one another and gives you suggestions. It automatically generates beautiful HTML for you, which looks as if it was written by hand by an expert.
Bootstrap Studio shines as a drag and drop builder, but it also gives you the ability to edit HTML when you need to. There are two ways to do it. The first is to drag the “Custom Code” component from the library and place it into your page. Then double click it. This will open a code editor in which you can write HTML.
The second way is to convert any part of your page, which you’ve built using our drag and drop builder, into HTML. Just right click a component and choose the “Convert to HTML” option. This will allow you to do advanced changes to components which are not possible with the drag and drop functionality.
Is PHP supported in Bootstrap Studio?
Bootstrap Studio is a design and protyping tool and it doesn’t support PHP. When you export your design, you get HTML, CSS and JS files. To write PHP, you need to then edit your exported site in a code editor or IDE.
Editing Code in Bootstrap Studio
For some things drag and drop isn’t enough. This is why Bootstrap Studio gives you full control over your markup when you need it. You can import and edit CSS, SASS, JavaScript and HTML in the Sublime Text-like editor.
Connect External Editors
Prefer to write CSS in your editor? No problem! With a single click you can connect Visual Studio Code, Sublime Text, Atom, IntelliJ and more.
Custom Components
You can extract pieces of your designs as Custom Components, and have them ready to be dropped into any design you create. You can also export these components as files and share them.
If you need a component which doesn’t exist in the Bootstrap Studio library, just click the Online tab in the Component Panel. There you will find thousands of components built and shared by the community. You can also upload your own.
Linked Components is a powerful feature which allows you to synchronize components, so changing one will automatically change the other. This is especially useful for things like headers and footers which you need to update across pages.
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.
Import Existing Websites in Bootstrap Studio
If you have a website that you’ve developed previously, you can import it. Just drag and drop the HTML, CSS, JS files and images into Bootstrap Studio and they will be added to your project.
Bootstrap Studio Pricing
Bootstrap Studio is a desktop application that works fully offline. There are no monthly payments, usage limits or ongoing fees. You buy it once and own it forever. The cheapest price is $29 which includes free web hosting and Forms as well as 1 year of free upgrades.
There also is a Lifetime version for $60 USD which has all powerful features and you’ll receive every new version for free, forever.
