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.

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 into 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.

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.

You can also check out our lesson about quickly converting Bootstrap Studio components to HTML.