Overview Panel - Automatic HTML Element Labels

Hi, firstly many thanks for creating such a fantastic bit of software!

While working on a site and adding lots of nested HTML etc I often find adding labels handy to know what things are. Would it be possible where relevant if I add say a button, heading, p, span etc any text used (first few words?) in the element get used as a automatic label if you haven’t already added one? maybe a preference to enable autolabels. Or is there a way to do this already?

Kind Regards

In Bootstrap Studio you can add labels, and comments.

To add a label, right click your element in the Overview panel on the left hand side of the application, and select Label.

You can also add comments, right click and choose add comment.

Comments don’t get exported, and stay only in your .BSS file. While you can choose on export if you want your labels included, these appear as comments in the HTML, typically like <!-- Start: label --> and <!-- End: Label -->, wrapping your component.

You can read more about comments here: Working With Your Team | Bootstrap Studio

Hi @catkin thanks for your helpful comments; I probably didn’t explain myself very well; I was suggesting that Bootstrap Studio could auto-label my added elements based on what I enter in them. For example if I have a complex piece of nested html and I add a button then add the text of that button to say “click to manage colors”; instead of BSS leaving the overview element button label blank, it could automatically add the label as “click to manage colors”

1 Like

I was writing that thinking, “hmmm, I’m probably missing something”!

I think I understand now, so just how the label feature works now, but it just adds something automatically to distinguish the elements based on what they have inside them.

1 Like

Stalut, For the moment, BSS automatically inserts the HTML identifier in the form of a label.

If you used Photoshop and text layers you’ll know what I mean, as PS does this.

So if I understand correctly, you are suggesting that components that contain text (paragraphs, headings, buttons etc) should go from this

Screenshot from 2025-01-29 12-25-04

To this

Screenshot from 2025-01-29 12-25-52

I like this idea. It will make navigating the overview easier. Users will still be able to add a label, we will just show the component text as a fallback. We will add this in one of our next updates.

4 Likes

Yes - that’s exactly what I was thinking; basically any elements that provide a useful “auto” label.

1 Like

For me it would also be handy to show the DIV id if the user entered one.

Please make this an OPTIONAL feature. I don’t want my overview cluttered up with dozens of labels I didn’t choose. I like the overview to be clean for the most part. Also, in the case of ID’s, they should always take precedence over a label (or come before it.)

5 Likes

Scratch this, it’s actually not that difficult to find it since you can see the element after clicking on it.