Custom Element Tags

It would be nice to be able to create elements with custom tags, even if it just has the functionality of a div.

can you be more specific on what you mean? You can do a lot of custom tags in various things so if you can clarify one of the users here can let you know if it can already do it or give it a +1 if it's needed. :)

(I previously wrote - but that is not displayed after 3 times edit:)

Mostly custom Tags are able to be added in the left bottom "Attributes" Window. <br><br> EXCEPT: "Tags starting with "on" as this is disabled by the developers as the described in the Tutorial: <br>

Note: We have disabled the 'on' event attributes for security reasons. You can attach event listeners by writing JS code with jQuery instead. <br><br> I can follow the mind behind the Secuirty-Question, but i do not agree with a fully disabling of it.<br> At least it should be the decision of the Programmer to use it or use jQuery.<br> I prefer NOT to use jQuery but pure javascript mostly (which is not mentiond against any framework!)

But as mostly, there is an workaround: <br><br> Create your Component as wanted, and if you need to include an Tag, BS IDE is not accepting, convert the Component by right clicking in the Overview Pane to html and edit it directly in the HTML Pane adding the needed Tag. <br><br> You will not see the added Tags in the HTML-Pane, but when clicking right on the converted Component to edit the HTML, you can see it in Text Editor Pane Hope, that helps at first.


(BUG in BS-Forum: after editing the entry, the html style tags like <br>are not correctly displayed as mentioned, instead the tags are written)

Sorry, I meant custom element tags, what Ralph mentioned I would call an attribute. Or at least that's what calls them. So instead of


div>, I could have <comment>, this is useful when coding dynamic elements. If you look at the HTML for a YouTube page, the comments are something like <ytd-comment>. I know it isn't necessary, but it can really help with organization, and referencing. Instead of having a div with an attribute that is comment, their tag will just be comment, and ends up having less text overall. I know I can do this with custom code, but it kind of defeats the purpose and I lose the drag and drop feature.

Thanks for taking the time to read!

I just noticed that even if I use a Custom Code block, its not affected by CSS.

For example


<custom> A custom element </custom>


     color : red;

The font colour doesn't actually change in bootstrap, but it still does in a browser. And I also just noticed that even if I add a class to the custom tag, it will not be affected unless its a div, also working in the browser.


Doesn't work

<custom class="custom"> A custom element </custom>


<div class="custom"> A custom element </div>


custom, .custom{
     color : red;

I do love bootstrapstudio though, great program and makes development so easy. There is just a few weird things like this, and then things like locked blocks which really don't make sense to me.

I don't have a clue what you're talking about, there is no "custom" element. I think you're misinterpretting what you're supposed to do?

Choose "Custom Code" from the Components menu (last section in the list). Drag that where you need to add custom code to your project Now put the code in there that you need to use for your project, that you are not able to do normally within BSS. Usually this is something that isn't available yet or just not going to be or something that you have to paste embed code for a specific external element and so on. Just replace the code that's in the box with your code.

Now style it as you would any other HTML code by giving the elements a Class and/or ID and adding those to your custom CSS file.

Not sure where your <custom> tags came from, but there isn't such a thing that I'm aware of (smack me if I'm wrong, but ... ) lol

Why is someone deleting my posts?

The Problem - if it us one - is the internal use if BSS-Preview

It uses its own Web-Server, as so with no access to locdl files. The Principle is a good target. But the UUpComing Use of external Ressouces has NO CHANCE.

I hope, the great Idea if BSS will target in future demands...

For Use if external Ressiurces you need to export your GUI-Desginded Projects and use your Browser for Preview/Debug it ..


Sorry I'm not quite catching that. What I was promoting doesn't require any external resources, its basically just a div element with a custom tag. But it just doesn't make sense the way it is, for the custom tag within a custom code block to not be styled.

My post that got deleted is not an external program, its all done within bootstrap, strictly so I can personally post articles on my website. Its just HTML and javascript, then once I'm done the front end I will do the back in

The custom element would just make coding and organization much nicer. Its pretty standard HTML, I'm actually surprised that bootstrapstudio doesn't at least style it in the custom code block.


Ok. I Misunderstood this. Somehow.

Basically. If you place a Custom Code Component wherever, you can write inside that What-Ever : html, js or css- isside

but: BSS will not show the Preview.

Export your site and watch it in the Browser and Debug it using Browser's Inspect.

Hope, BSS will get more with Version 5 or 6 regarding deside Bootstrap. BSS is a Powerful Idea!

Its all good man thanks, ya for sure I didn't expect it to come out any time soon, just wanted to suggest it for a future version. Indeed bootstrap is powerful, really loving it, just thought this could make it even better.

I think you guys could target a lot of the users, they would love bootstrap, I'm not sure if you've used visual studio, but the visualizer is utter shit. Just look at the comparison of the same page, the right is visual studio, and the left is browser(which looks the same in bootstrap). Making websites in is impossible without an external program such as bootstrap, unless you are willing to use a browser for the layout which I couldn't bare to do.

enter image description here

Hi @LittleRain

I'm 100% with you!! And i - also - am not any familiar with BSS. But - I Also see BSS Idea as A Best to integrate.

It's their Dev's to reach it. I posted some ideas as some others - i suppose: reducing on Bootstrap will keep the name, but not result in future success.

Including Things like "Component Editor" or "(my)SQL-Connector" or " REST Requester" would do magics..

The preview depends entirely on what you have put into the Custom Code block. If it's JS it will "sometimes" work, but may be quirky depending on the nature of it. If it's PHP or other languages other than HTML or CSS it will not work and yes you will need to export it and upload or use your own setups for viewing local files to preview it correctly. Many things do show up in the Browser previews though and sometimes the Preview as well, such as forms and galleries etc. as long as you have referenced the files in "absolute" format rather than "relative". The quirky part I believe they are working on for the preview in app which has some issues with graphical displaying of some things. Just really depends on what you put into the Custom Code block as to whether or not it will Preview in app or browser or not.