As you know HTML can't be edited in Bootstrap Studio. This is done because we want to provide a fully featured drag and drop interface and give easy to change options to every component. You can't have this and unrestricted HTML editing at the same time. We have received many request to enable HTML editing, and we agree - there are plenty of reasons why you would need this. But we want to keep the drag and drop functionality, so we came up with a way to do this. The idea is to create a specialized component the contents of which can be edited as HTML. We can call it "Custom Code" or something similar. You won't be able to drag/drop other components inside it - Bootstrap Studio will treat it as a black box. But when double clicked in the HTML panel, it will open a code editor and you will be to write whatever you wish there. Here is how you would use it: 1. You start a new design and quickly build a fully working layout with drag and drop. 2. You realize that you need to do something complex, which can't be done without writing code. Then you just take a "Custom Code" component and place it in your design. 3. You double click this component and write whatever HTML you need inside it. I think that this would be a good solution and I looking forward to your thoughts on this.
Yeah, I guess that it’s nice idea! Better than nothing. 
I think one of the biggest things for me regarding being able to not edit the HTML is, I haven’t found any way to simply put in a break within a block of text. As well as edit a div to enter some text unless I first put a paragraph or span which is then when you can edit text.
@saj, line breaks are coming. Text editing needs to be rewritten before they can be supported (we will also add support for RTL languages, undo/redo and a few other needed features). This would take quite a bit of development effort and we are postponing it for now until we release other needed features.
I don’t think we will be supporting writing text directly inside divs. Paragraphs are a more semantic way to do this. One alternative is to have a quick way to insert paragraphs. For example if you use one of the keyboard shortcuts for editing text on an empty div, we could insert a paragraph automatically. Not sure how intuitive this would be. What do you think?
Something i would really like if you would add supoort for php ( and export as php).
Now i always need to export and rename it.
With the " Custom Code " could you please add php support ?
Yes, export as *.php would be nice
and a custum html-part would be very nice
I have to make often connections to databases. So if a custum html-part is in there I can put in my <?php dataconnections ?>
Thanks Martin, I appreciate the info. I’m looking forward to the updates.
@modder24, @plusq Thank you for the suggestions! But I am afraid that PHP editing is way out of the scope of Bootstrap Studio. One solution is to keep your PHP project separately and develop it with your favorite IDE. Then you can embed the data in your Bootstrap Studio website with JavaScript and AJAX.
You will be able to write PHP code in the Custom Code component, but it won’t be highlighted or checked for errors.
Ok, that is perfect.
But please, could you add the ability to export as php files directly?
This sounds interesting. A vote for great flask/jinja2 support here.
So if I understand correctly, this would theoretically be possible?
Example Jinja2 template:
{% for entry in entries %}
<p>{{ entry.title }}</p>
{% endfor %}
With “custom code”:
<blackbox class="custom_for_flask_for_entries">{% for entry in entries %}</blackbox>
<p>{{entry.title}}<p>
<blackbox class="custom_for_flask_endfor">{% endfor %}</blackbox>
So when I am looking at this in preview/bootstrap studio, it will render the text “{{entry.title}}” which is fine.
The idea here is I have some code that parses through my project on export, and catches the “blackbox” tag, replacing it with the appropriate code (either by id or class reference?).
Could you expand a bit more on how the “blackbox” code would be generated?
Forgot to mention, there would be a class added to hide the jinja code while in preview.
@Martin
I develop my php-Projects completly in Netbeans. For the design Bootstrap Studio (BTS) ist great. I don’t need really php-support ‘in’ BTS. When your “custom code” is ready - thats fine. BTS does not have to “show” the code behind the php.
When I export the website every file is an <filename>.html file - so I have to rename each file from *.html to *.php
For big projects an quick changes in the design its not useful.
For “the beginning” it is enough if BTS can rename the new files as *.php
You have there a code in that adds “.html” to the filename if it not exists. Just make an part - if end is “.php” don’t change
As my webspace runs php I never use .html files. Even if no php is included.
So I am free to include code if I want (with your new custum-code)
I use “linked” code e.g for menu-files like “menue.inc.php”, “menue.php.inc”, or “menue.inc”
to import with custom code
{custom_code}<?php require_once(‘menue.inc.php’); ?>{/custom_code}
or for database input
and if BTS then later could show the linked .php files… awesome
I CAN'T WAIT FOR THIS!
This is the ONLY thing I really need support for. I need to do some simple stuff like Google Analytics and Facebook tracking. I also have some tracking pixels I need to fire off some times. So I export, and manually add the code to HTML. But any time I make a change I have to do it all over again :'(
Worth it. But this will super super super help me out.
Hi Martin,
is the "simple php support" of Bootstrap Studio possible in the near future?? If not then I have to script me around the html2php files after export If you could do... I could wait :)
The only thing Bootstrap Studio should do is
save the pages as .php or .html
we do not need any php debugging, or coding functionality in Bootstrap Studio
this code should is now possible in the new version:
<title><?php echo $title; ?></title>
<?php include(“header.html"); ?>
<?php include(“menue.php"); ?>
<?php include(“footer.php"); ?>
so only save as .php...
And you make more coders very happy I think :)
So USERS... vote for it...^^
I vote for php to become part of this as I would love to be able to eventually design using bootstrap for Wordpress themes.
Hey @martin, so I finally (long time) thought of why text in DIV should be acceptable. Here's why as I understand it.
Semantically a paragraph would be ideal, in an outline format where it's proceeded by a Heading or subheading. I believe this is the case mostly because of Assisted/Screen reader usage. I think that's the main reason behind why HTML started getting all tag definie/with purpose many years ago :)
For example a DIV just represent a block of something in this case text. It doesn't really have any semantic meaning necessarily with what content comes before or after it.
However, a paragraph does represent something semantically and it should be proceeded by a Heading, subheading and or another paragraph etc.. Because the paragraph tag it's self I believe has a specific semantic meaning. A paragraph tag I believe shouldn't just be used in some arrent location in a web page that's what/why there is a DIV tag.
Not Semantic
< section>
< article>
< h1>Heading< /h1>
<div>Wording</div>
<div>Wording</div>
< /article>
< /section>
Semantic
< section>
< article>
< h1>Heading< /h1>
< p>Wording< /p>
< p>Wording< /p>
< /article>
< /section>
Not Semantic
<div class="float-left">
< p class="other-styling">Wording not necessarily in involved with what comes directly before or after it but still useful to the site because I have a link< /p>
</div>
Semantic
<div class="float-left">
<div class="other-styling">Wording not necessarily in involved with what comes directly before or after it but still useful to the site because I have a link</div>
</div>
Take for instance the Jumbotron... It has a heading followed by 2 paragraphs, that makes sense semantically. If there was no heading then it wouldn't make sense because there's no meaning behind the use of the paragraph tag. They then should be replaced by DIVs instead. Even if you need to re-apply the same styling because "semantics" :)
I hope I was able to convey what it is I'm trying to describe, why it would make sense for DIVs to support direct text editing.
Saj
I vote too