Attribute editing

Just purchased this software and following instructions for editing attributes, I just cant seem to get it to work. 1.If I create a custom CSS stylesheet How do I utilise that to accept the id tags that I create? it just keeps reverting back to the default. 2. Where the hell on the component options is it possible to unlock I cant find it. Quoting the guide :- "Note: You can add any CSS class that you wish, but some, like text-left in this picture, are locked. To change locked classes in Bootstrap Studio, you need to modify the component's settings in the Options panel." The instructions for this product are probably it's biggest let down. Very scant particularly for those new to bootstrap. On the plus side it does look promising and yes I think fairly easy to use except for these types of problems.

Hang in there benbear, this app is fairly new and I think all the instructions haven't been fine tuned yet, but the instructions that are there now are to get people started with it.

For unlocking, you can't. I don't know why the guide would say you can. What you do when you want to edit the locked classes and ID's is you copy them to your custom css file. See this post here and if you need more explanation please ask again for whatever part you're stuck on. Hopefully this will help some:


When you create a custom CSS, it's easier to access it by double click the name of the file in the Design pane on the bottom right of the app. This will pop up the STYLE pane with the custom CSS file tab highlighted.

To the left is the HTML pane which displays the HTML of your Doc. Below that is the ATTRIBUTES pane if you click that you can add/edit any unlocked ID/Classes you can even add your own attributes by clicking the plus sign. If you add your ID/Class to a section of your HTML then select that HTML element either in the HTML pane or the Overview pane on the bottom left of the app then in your custom CSS file if you have nothing in it just simply clicking in the box will create a new rule with your selected elements current set of ID and classes. The rules wording will be highlighted in blue and you can start typing something different or hit tab to type in your properties and values. If you already have several rules entered then the thing to look for is a thin blue line that appears before/after a rule depending on where your mouse is hovering over. The thin blue line indicates where the next rule will be entered when you click in the custom CSS tab.

Some, not all locked ID/Classes can be unlocked/removed by changing the appropriate Options pane options.

For example, I had to track down the Quote you referenced. The example the tutorial has for that is a paragraph that has text-left class locked. In that example to unlock that you would select that element in either the Overview pane on the bottom left of the app or in the HTML pane in the bottom middle of the app. This will then change the Options pane on the top right of the app the paragraphs available options. Under the section for TEXT OPTIONS is the Alignment option set to Left in the dropdown. To change that, set it to Default and that will remove the locked class of text-left.


I kind of expected the attributes to be under the options panel. But I did make a fatal mistake, I accidentally hid the attributes pane at some time, and spent several hours searching how to "add" an ID attribute. Maybe add a view that brings up the attribute pane or cross reference the attributes pane to the options??