Writing HTML in Bootstrap Studio

Forums Tutorials Writing HTML in Bootstrap Studio

This topic contains 3 replies, has 4 voices, and was last updated by  fredb 1 week, 1 day ago.

Viewing 4 posts - 1 through 4 (of 4 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.


    I think that bootstrap studio app is perfectly a miracle as the app with easy oppurtunities on the constructing of website with responsive effect and with beautiful design.

    Thank to them young people that have created this software. From Albania
    But, when i downloaded and extracted the bootstrap templates from zip to folder that contains “js,html,css,fonts,img,etc” for importing to the bootstrap studio,
    does not show anything, as the Pinegrow Web Editor


    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.

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

You must be logged in to reply to this topic.