15 articles
Utility Classes
Helper classes for spacing, typography, colors, positioning, borders, shadows, and responsive tweaks.
BootstrapBootstrap Utility ClassesGuttersGutters Gutters control the horizontal and vertical spacing between grid columns. Canvas uses Bootstrap 5 gutter classes and extends them with an…HeightsHeights Canvas provides fractional heights, viewport heights, and responsive height utilities on top of Bootstrap. Note: the prefix is also used by…ContrastContrast Colors Contrast utilities are one of Canvas's most useful features. Instead of hardcoding greys, you use a contrast scale (0 to 1000) that…SpacingSpacing Canvas uses Bootstrap 5 margin and padding utilities and extends the scale with an extra step ( ). Notation Property: (margin) or (padding)…TextText Utilities Canvas includes Bootstrap 5 text utilities plus its own extensions for size, letter spacing, and weight. Alignment and wrapping , , ,…BackgroundBackground Utilities Canvas provides theme background colors, the contrast scale, background sizing helpers, and gradients. Theme and base colors…BordersBorders Canvas uses Bootstrap 5 border utilities and adds width, style, and extended radius helpers. Add or remove borders , , and per side: , , , ,…GradientsGradients Canvas ships a set of ready made background gradients plus a gradient text helper. Each gradient is a applied as . Gradient backgrounds…OpacityOpacity Canvas provides both Bootstrap style opacity utilities and its own fine grained opacity scale, plus an opacity transition helper. Bootstrap…ShadowsShadows Canvas uses Bootstrap 5 box shadow utilities and adds a shadow transition helper plus hover shadows. Shadow classes Class Effect -------…TransformTransform Canvas ships rotate, scale, and translate utilities, most with hover twins (the prefix applies the transform on hover). Rotate Rotation in…PositionPosition Canvas uses Bootstrap 5 position utilities and adds responsive position variants and sticky helpers. Position type Class position -------…Z-IndexZ-Index Canvas provides a compact z-index scale for layering elements, extending Bootstrap's small set. Z-index classes Class z-index -------…ResponsiveResponsive Utilities