January 18, 2017 at 3:18 pm #3287Danny MarkovBootstrap 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.
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.
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.
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 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.March 4, 2017 at 6:02 am #3982RenMember
Thank you very much! This helps a lot. 😀March 21, 2017 at 8:38 pm #4236fredbMember
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.April 4, 2017 at 5:04 pm #4625positivecrashMember
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’April 6, 2017 at 2:54 am #4668
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.April 13, 2017 at 11:27 am #4850mihaip007Member
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.April 13, 2017 at 3:18 pm #4863Chris HackwoodMemberValued
No you can’t unless you build the dashboard using drag and drop components.
You must be logged in to reply to this topic.