Helper Classes
Canvas ships a large set of utility (helper) classes on top of Bootstrap 5's own utilities. These cover colours, spacing, hover effects, transforms, text effects, and more. Below are the real, verified helper families from the template's sass/_utilities.scss.
Colour and Background
| Class |
Purpose |
bg-color |
Background using the theme primary colour. |
bg-contrast-* |
Background using a contrast scale value. |
border-color |
Border using the theme colour. |
border-contrast-* |
Border from the contrast scale. |
gradient-* |
Apply a preset gradient background. |
gradient-text |
Clip a gradient to the text. |
text-contrast-* |
Text colour from the contrast scale. |
nobg |
Remove background. |
<div class="bg-color text-white p-4">Primary background</div>
<h2 class="gradient-text">Gradient heading</h2>
Hover Effects (prefix h-)
Many utilities have a hover variant, prefixed with h-, that only applies on hover:
| Class |
Purpose |
h-bg-color |
Change background colour on hover. |
h-text-color |
Change text colour on hover. |
h-shadow, h-shadow-sm, h-shadow-lg |
Add a shadow on hover. |
h-scale, h-scale-sm, h-scale-lg |
Scale up on hover. |
h-translate-y, h-translate-x |
Shift on hover. |
h-rotate-* |
Rotate on hover. |
h-op-0 / h-op-1 |
Fade out / in on hover. |
<a href="#" class="button h-scale-sm h-shadow-sm">Hover me</a>
Transforms
| Class |
Purpose |
scale, scale-sm, scale-lg |
Scale the element. scale-n* for scale-down. |
rotate-*, rotate-0, rotate-n* |
Rotate (n = negative). |
translate-x, translate-y |
Translate on an axis (with -lg, -sm, and -n negative variants). |
transform-ts |
Add a transition to transforms. |
Text Effects
| Class |
Purpose |
text-stroke |
Outlined (stroked) text. text-stroke-none removes it. |
text-shadow-none |
Remove text shadow. |
text-transform-none |
Disable text-transform. |
text-fill-effect |
Fill effect on text. |
gradient-underline |
Gradient underline. |
ls-*, ls-n |
Letter-spacing (n = negative). |
fw-medium, fw-semibold, fw-extralight |
Extra font weights beyond Bootstrap's. |
font-primary, font-secondary, font-body |
Apply a theme font family. |
<h1 class="text-stroke fw-extralight ls-1">Outlined Title</h1>
Layout and Sizing
| Class |
Purpose |
divcenter (via .center/mx-auto) |
Center a block element. |
inline-block |
Force inline-block display. |
overflow-visible |
Allow overflow. |
min-vh, max-vh, vh |
Viewport-height sizing helpers. |
mw-* |
Max-width helpers. |
square, square-* |
Equal width/height boxes. |
vertical-middle |
Vertical-align middle. |
col-padding |
Padding tuned for grid columns. |
content-wrap |
Standard content padding wrapper. |
Transitions and Opacity
| Class |
Purpose |
all-ts |
Transition all properties. |
op-ts, bg-ts, border-ts, text-ts, shadow-ts, transform-ts |
Scoped transitions for specific properties. |
op-0, op-1 |
Opacity 0 / 1. |
Images
| Class |
Purpose |
grayscale |
Desaturate an image. grayscale-out reverses on hover. |
imagescale, imagescalein |
Zoom effects on images. |
lazy |
Marks an image for lazy loading. |
<img src="images/photo.jpg" class="grayscale grayscale-out" alt="">
Notes and Tips
- These helpers layer on top of Bootstrap 5, so you can freely mix them with Bootstrap spacing (
p-4, me-3), display (d-none d-lg-block), and flex utilities.
- Hover variants (
h-*) only take effect on hover, letting you define a resting state and a hover state without custom CSS.
- Responsive suffixes exist on many helpers (
-sm, -lg) to scope an effect to a breakpoint.
- Prefer these utility classes over inline styles for consistency with the theme's design tokens (colours, fonts, and contrast scale).
