Custom Code

Custom Code is a powerful component which lets you freely edit its content as HTML. Bootstrap Studio doesn't attempt to parse or validate the code in any way, which opens the door to things like embedding server-side languages or tags which the application doesn't natively support.

Basics

Drag and drop a Custom Code component from the Component panel to the stage. Double click it to open it for editing.

In this editor you can write code without restrictions. It supports most of the keyboard shortcuts you know and love from Visual Studio Code, Sublime Text and other popular editors. When you hit Apply the changes you've made will be added to the page.

Note

Custom Code is cleaned up and sanitized when shown in Bootstrap Studio to ensure that the in-app view is not broken by what you write, but your code is output exactly as is when you preview in the browser or export.

Converting Components to Custom Code

If you wish to customize a component or part of your design in a way which isn't possible in Bootstrap Studio, you can do it by converting it to Custom Code. Just right click a component and choose Convert to HTML.

Converting Custom Code to Components

You can convert Custom Code to components by right-click it and choosing Convert to Components. Keep in mind that the app will only recognize correctly structured HTML and convert it into the corresponding components. HTML tags that are not available as Bootstrap Studio components (e.g. dd, dl, dt, etc.) will be preserved as Custom Code. Any non-standard tags will be dropped and invalid html will be cleaned up.