Styling character sheets with classes

Styling character sheets with classes

Classes allow you to use Bootstrap to change the appearance of components.

Spacing components

To improve the readability of a character sheet, space out the elements to make them clearer. See Bootstrap documentation: Spacing utilities.

Changing text appearance

To change the appearance of text (bold, alignment, etc.), use Bootstrap classes: Text utilities.

Highlighting

Use highlight classes to emphasize certain elements or visually separate them. Examples: highlight-1, highlight-2, and borders: Border utilities.

Creating separators

To create visual separators, you can use Bootstrap classes inside a container, for example: border-bottom border-danger align-self-center.