Some components have also style and class properties.

Style

In general most components do not require more advanced styling. But that is not always the case. Look at the following sample:

The shading can be accomplished by setting a style. If you open the style property then you have a range of options:


In the first tab you are able to apply background image. I.e. on the root component it will be a full-screen background. The edges and border assign colors and edges to the border, The shadow is used for the login sample above, and finally the margin and padding. Be aware that these formats are clean CSS styles! They have nothing to do with Bootstrap, so use with care.

Local style

By default the style is local to the component you have set the style for. 


Global style

If you click on the check-mark then a new icon will appear:



The provided style will now be global. If you open the property editor you get a screen with a list of global styles. 



You can add new styles, by adding a style name and applying the properties. Double click on the style name to edit the properties:



As the styles are saved under a global style name, you can use this everywhere in your project where you can assign a style. 

Class

Sometimes experienced developers need setting that are not provided in the properties, nor styling, but require a ‘hard-coded’ class specification. Using the class property opens a CSS editor where you can apply your own CSS. It is not encouraged for newbies. 


To create a class, use the dropdown to generate a class name:



Next click on CSS to open the CSS editor.



Within the curly brackets you can enter your css or use the editor to make it a bit simpler:



Remarks about using styles and classes

Using styles and certainly classes are properties that bypass Bootstrap. That is not always an issue but could be. If you use these then you must be sure of what you are doing. The features are there to help advanced developers in their task. 

In some cases the properties of Style and Class overlap the standard properties. If that is the case then set the properties to empty to avoid conflicts with the settings in the class and/or style.