Adding Attributes to Elements

Adding your own classes and ids to elements is indispensable when writing CSS. You can also make use of Bootstrap's hundreds of utility classes which can make your life easier.

Bootstrap Studio offers a nice and easy way to add attributes to HTML elements. To do it, click the Attributes panel on the bottom of the HTML tab.

Note: You can add any CSS class that you wish, but some, like in the picture above, are locked. To change locked classes in Bootstrap Studio, you need to modify the component's settings in the Options panel.

To navigate the Attributes form use Tab, Shift+Tab and Enter. The attributes are applied automatically to the element, and full Undo/Redo history is retained.

Transferring Attributes

For convenience, you can copy/paste attributes between elements. Just right click the element in the HTML tree and choose "Copy Attributes".

From this point you can paste these attributes on other elements with the "Paste Attributes" option, and they will be added to the new element. This is a quick way to transfer a large number of attributes and class names without having to link components together.

Note: The 'on' event attributes are disabled for security reasons. You can attach event listeners by writing JS code with jQuery instead.