BSS Tutorials »

Writing HTML in Bootstrap Studio

Bootstrap Studio shines as a drag and drop editor. But sometimes you need extra control over your layout and makrup. In those cases, you can use Bootstrap Studio's
powerful HTML editing functionality.

There are two ways to edit HTML in Bootstrap Studio. The first is by adding the "Custom Code" component to your page. The second is by converting a part of your page to HTML.

1. Writing HTML with "Custom Code"

"Custom Code" is a powerful component which gives you full control over its content. You can use it to quickly add HTML snippets to your pages.

To add the component to your design find it in the Components panel and drag and drop it to your page.

When you double click a custom code component (or when you right click it and choose "Edit Code"), it will open up a code editor in the bottom of the application window.

To edit your HTML file, just double click it. This will open our powerful code editor.

Here you have full control over the code. This editor supports most of the keyboard shortcuts you know and love from Sublime Text and other popular editors. When you hit "Apply" the changes you've made will be added to the page.

Note: HTML is sanitized and JS is disabled when Custom Code is displayed in Bootstrap Studio for security purposes. In Preview and when exporting, Custom Code is included in the page unmodified, exactly the way you've written it.

2. Converting components to HTML

The second way to author HTML in Bootstrap Studio is to convert portions of your pages to HTML as you need it. This is a great way to quickly start a project - drag and drop components to build your layout, and then convert it to HTML if you need greater control.

To convert a component to HTML, right click it and choose the "Convert to HTML" option from the menu.

This will take the HTML of the selected component and place it inside a new Custom Code component. The original will be deleted. You can double click and edit the Custom Code component like we discussed in the previous section of this article.

This concludes our quick tutorial on Custom Code! This is a great tool to have for those cases where you need extra control over the HTML, or a quick way to add a Bootstrap Snippet or two which you wish to try out.