Bootstrap Studio
Drag and drop editor
Bootstrap Studio works with its own document format, which combines all important files (photos, CSS, ...) in one document. Any number of pages can be created in each document, each of which is automatically created as an HTML file. External fonts and images can be dragged and dropped into the library and later inserted into the pages. Existing HTML and CSS files can also be easily inserted into an existing or new project.
With the variety of Bootstrap components, a page can be dragged and dropped together. The tool offers a large selection, which is sorted by text, image, controls, grid, containers, etc. Adding elements works perfectly. New and existing elements can be moved directly on the workspace or in the overview list on the left.
Own style customizations and themes
In general, all elements can be freely edited. Bootstrap Studio already provides the most common Bootstrap options, e.g. for buttons or navigation, in the sidebar (right). However, if you want to add further modifications, you can add your own ID or additional CSS classes to each element in the live generated HTML code. This allows you to not only add further Bootstrap options, but also completely custom CSS styles. If you do not have in-depth knowledge of HTML and CSS, you can also create the page completely based on a ready-made Bootstrap theme. Bootstrap Studio already provides a selection of these, such as Cerulean, Darkly, Paper, United and many more. However, you can also add your own themes if you wish.
If you don't have in-depth knowledge of HTML and CSS, you can also create the site completely based on a ready-made Bootstrap theme. Bootstrap Studio already provides a selection of these, such as Cerulean, Darkly, Paper, United and many more. However, you can also add your own themes if you wish.
Live Preview
Bootstrap Studio works, as is usual for a WYSIWYG editor (W has You See Is W has You Get), with a live preview of the pages. It is helpful that there are already different viewport sizes to choose from: Phone, Tablet, Laptop and Desktop. These are predefined settings based on the most common sizes.
By activating the live preview, Bootstrap Studio creates a URL that can be opened by all browsers and devices in the same network. This means that the pages can not only be tested on your own computer with any browser, but also on a tablet or smartphone in parallel, for example. This view runs live, which means that as soon as a change is made to the code, the view is reloaded on all devices and the adjustment is immediately visible.
Export
Of course, exporting the website is important for uploading. Since Bootstrap Studio, as mentioned at the beginning, works with its own document format, there is an export function that prepares the data for uploading to the server. A static website consisting of HTML, CSS, JS and images is exported. All it takes is one click to export and select a storage location, Bootstrap Studio does the rest in just a few seconds.
Conclusion
All in all, Bootstrap Studio is a very pleasant and practical editor. It has a lot of potential and can greatly simplify the creation of websites. Unfortunately, Bootstrap Studio does not yet support all of Bootstrap's objects/functions/options, but the developers are very active in supporting and, above all, further developing the editor. New Bootstrap elements are constantly being added. The only tricky part is the learning curve. Anyone who has never heard of Bootstrap before or has never dealt with it will need some time to find their way around. The (English) names of the elements are mostly self-explanatory, but it takes a bit of practice to understand which elements need to be nested and how, and what options are available. Some previous programming knowledge or a good understanding of code is necessary in order to really make good use of this powerful tool. However, the live preview also makes it a very suitable tool for improving your own programming skills. Are you curious and want to find out more about working in a digital agency? Then read our blog article "Five fantastic reasons to work in a digital agency".