Colors, background & effects

Appearance utilities

Color utilities help communicate meaning (status, emphasis) and improve readability. The Appearance group is shared across many Bootstrap components so you can set background, opacity, shadow, and sizing consistently.

Card example

Cards are a useful target for Appearance utilities because they’re common containers used across many layouts. The card is selected so the Appearance group is visible in Properties.

Screenshot: Card exampleClick to open the larger image

Background color

Use Appearance → Back Color to apply Bootstrap background utility classes (including subtle/background-only variants).

Screenshot: Background colorClick to open the larger image

Opacity & shadow

Use Back Opacity, Opacity, and Shadow to fine-tune how the element looks without writing custom CSS.

note: These map to Bootstrap utility classes like bg-opacity-*, opacity-*, and shadow-*.

Screenshot: Opacity & shadowClick to open the larger image

Width & height

Use Width and Height to apply sizing utilities like w-* and h-*.

Screenshot: Width & heightClick to open the larger image

Next steps

Next, learn borders and responsive display/flex utilities.