Writing HTML in Bootstrap Studio

Forums Tutorials Writing HTML in Bootstrap Studio

This topic contains 6 replies, has 7 voices, and was last updated by  Chris Hackwood 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #3287
    Danny Markov
    Bootstrap Studio Developer

    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.


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

    Custom Code

    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 JavaScript file, just double click it. This will open our powerful code editor.

    Edit Custom Code

    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 how you’ve written it.


    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.

    Convert to HTML

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

    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.


    Thank you very much! This helps a lot. 😀


    Sorry but for this function, I dont’ understand cause lot of questions (I’m not a coder)
    How edit html as manual, for example I just want add </br> how I can do it ?
    CustomCode is the only way ?
    Convert to HTML mean , item cannot be work as same behaviour inside BS ?
    Thanks for anyhelp.


    How can I create fully clear html file? I need html file without any scripts, css, <body> and <head> tags for ajax loading.

    I would like some button in program settings like ‘I know how to edit code, please, trust me, Bootstrap Studio’


    It would be really great if you could make the files, you use in your tutorial videos, available for download. By doing this it will make it a lot easier to learn the product quickly. It would also be great if you could slow down a bit in the tutorial videos. Towards the end things happen way too quickly.
    Love the app by the way.


    Hi – I have a question.
    Just bought this and I want to know if I can edit an existing template?
    I bought an admin template and I want to be able to edit it with a drag and drop. Can this be done? Can I load an existing web template into the system and start working on it?

    Thanks in advance.

    Chris Hackwood

    No you can’t unless you build the dashboard using drag and drop components.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.