Help Text — Reference

Look up the controls for Help Text and understand the markup, values and visual behavior they configure.

Help Text

Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Help Text

Name	Description
ID	Sets this element’s unique page identifier. Use a stable name such as projectSummary when another control, label or anchor must target it. Do not duplicate a static ID inside repeated markup; a component binding name and a form field’s submitted Name serve different purposes.
Class	Edits the element’s space-separated CSS class list. For example, add a project-defined class such as project-summary only when your stylesheet defines it. Preserve classes required by the component. A class name alone does not create CSS, load an extension or implement an event handler.
Help Text	Small help text under a control. Sets supporting text shown below a form control (typically using .form-text ). Use it for hints, constraints, and validation expectations (e.g. “At least 8 characters”). Bootstrap docs: Help text

Text

Name	Description
Advanced	Shows the additional Text controls, including opacity, transform and overflow. This is an inspector preference stored locally, not a CSS class on the page. Enable it when you need to configure text truncation, then use the revealed control.
Color	Sets a Bootstrap text-color utility. For example, text-primary applies the theme’s primary text color; text-body uses its body text color. Theme variables determine the actual color, so check both light and dark page modes. This does not change the background. Options: Primary (text-primary), Primary Emphasis (text-primary-emphasis), Secondary (text-secondary), Secondary Emphasis (text-secondary-emphasis), Success (text-success), Success Emphasis (text-success-emphasis), Danger (text-danger), Danger Emphasis (text-danger-emphasis), Warning (text-warning), Warning Emphasis (text-warning-emphasis), Info (text-info), Info Emphasis (text-info-emphasis), Light (text-light), Light Emphasis (text-light-emphasis), Dark (text-dark), Dark Emphasis (text-dark-emphasis), Body (text-body), Body Emphasis (text-body-emphasis), Body Secondary (text-body-secondary), Body Tertiary (text-body-tertiary), Black (text-black), White (text-white), Black 50 (text-black-50), White 50 (text-white-50), Muted (deprecated) (text-muted). Default: no override from this control.
Text Opacity	Changes the opacity used by supported Bootstrap text-color utilities, without fading the element’s background or all its children as a single layer. For example, text-primary with text-opacity-50 renders the primary text color at 50%. A custom color that does not use --bs-text-opacity will not respond to this setting. Options: Default, 25% (text-opacity-25), 50% (text-opacity-50), 75% (text-opacity-75), 100% (text-opacity-100). Default: no override from this control.
Align	Aligns text within the element’s available width. Start and End follow the writing direction; Center centers inline content. At the MD viewport, Center writes a responsive class such as text-md-center, which applies from that breakpoint upward. It does not center the element itself. Options: Start (text-start), Center (text-center), End (text-end). Default: no override from this control.
Font Weight	Applies a font-weight utility to the text. For example, fw-bold requests bold text and fw-normal restores normal weight. The selected font must supply or synthesize the requested weight; this setting does not load another font file. Options: Bold (fw-bold), Bolder (fw-bolder), Normal (fw-normal), Light (fw-light), Lighter (fw-lighter).
Line Height	Sets the height of each line relative to its font size. For example, lh-1 uses a line-height of 1, useful for a compact heading but often too tight for a paragraph. It changes spacing between text lines, not the margin around the element. Options: 1 (lh-1), Small (lh-sm), Base (lh-base), Large (lh-lg).
Font Style	Applies one or more text-style classes. For example, fst-italic makes text italic, lead gives an introductory paragraph the theme’s lead style, and font-monospace selects the monospace font stack. These classes style the selected element without changing its HTML tag. Options: Italic (fst-italic), Mark (mark), Lead (lead), Small (small), Monospace (font-monospace), Abbreviation (initialism).
Transform	Changes the displayed letter case using CSS. For example, text-uppercase displays Product name as PRODUCT NAME while the source text stays Product name. Capitalize changes the initial letter of each word; it does not rewrite stored data. Options: Uppercase (text-uppercase), Capitalize (text-capitalize), Lowercase (text-lowercase). Default: no override from this control.
Overflow	Controls wrapping and overflow of text. text-nowrap prevents wrapping; text-break allows long unbroken words to wrap; text-truncate clips a single line with an ellipsis. Truncation needs a constrained width and a block or inline-block display. For example, use text-truncate on a title inside a fixed-width card. Options: Prevent wrapping (text-nowrap), Truncate text with an ellipsis (text-truncate), Word Break (text-break). Default: no override from this control.

Appearance

Name	Description
Back Color	Sets the element’s background using Bootstrap theme utilities. bg-primary changes the background; text-bg-primary sets a primary background with a corresponding contrasting text color. For example, use text-bg-primary for a highlighted notice. Existing custom styles can override the utility. Options: Primary Contrast (text-bg-primary), Primary Background Only (bg-primary), Primary Subtle (bg-primary-subtle), Secondary Contrast (text-bg-secondary), Secondary Background Only (bg-secondary), Secondary Subtle (bg-secondary-subtle), Success Contrast (text-bg-success), Success Background Only (bg-success), Success Subtle (bg-success-subtle), Danger Contrast (text-bg-danger), Danger Background Only (bg-danger), Danger Subtle (bg-danger-subtle), Warning Contrast (text-bg-warning), Warning Background Only (bg-warning), Warning Subtle (bg-warning-subtle), Info Contrast (text-bg-info), Info Background Only (bg-info), Info Subtle (bg-info-subtle), Light Contrast (text-bg-light), Light Background Only (bg-light), Light Subtle (bg-light-subtle), Dark Contrast (text-bg-dark), Dark Background Only (bg-dark), Dark Subtle (bg-dark-subtle), Body (bg-body), Body Secondary (bg-body-secondary), Body Tertiary (bg-body-tertiary), White (bg-white), Transparent (bg-transparent). Default: no override from this control.
Back Opacity	Changes the opacity of a background color that uses --bs-bg-opacity. For example, bg-primary with bg-opacity-25 gives a 25% primary background while leaving text opaque. It does not fade a background image and is separate from the whole-element Opacity control. Options: Default, 10% (bg-opacity-10), 25% (bg-opacity-25), 50% (bg-opacity-50), 75% (bg-opacity-75), 100% (bg-opacity-100). Default: no override from this control.
Width	Sets a width utility relative to the containing block. For example, w-50 requests 50% of the parent’s width, while w-auto lets normal layout determine the width. This is different from a grid column span and from viewport width. Options: Auto (w-auto), 25% (w-25), 50% (w-50), 75% (w-75), 100% (w-100), Max 100% (mw-100). Default: no override from this control.
Height	Sets a height utility relative to the containing block. For example, h-100 requests the parent’s full height, which needs a resolvable parent height to have the intended effect. Use auto when the content should determine height. Options: Auto (h-auto), 25% (h-25), 50% (h-50), 75% (h-75), 100% (h-100), Max 100% (mh-100). Default: no override from this control.
Opacity	Fades the whole rendered element, including its text, background and descendants. For example, opacity-50 makes the entire card half opaque. Opacity zero still leaves layout space and does not by itself disable clicks or remove content from assistive technologies. Options: Default, 0% (opacity-0), 25% (opacity-25), 50% (opacity-50), 75% (opacity-75), 100% (opacity-100). Default: no override from this control.
Shadow	Applies or removes a Bootstrap box shadow. For example, shadow-sm gives a card the theme’s small shadow and shadow-none removes this utility’s shadow. The shadow does not allocate extra layout space; its appearance comes from the active theme variables. Options: Default, None (shadow-none), Small (shadow-sm), Regular (shadow), Large (shadow-lg). Default: no override from this control.
Object Fit	Controls how replaced content such as an image fits an explicitly sized box. object-fit-cover fills the box and may crop the image; object-fit-contain keeps the whole image visible and may leave space. It does not size the box or control CSS background images. Options: Default, Contain (object-fit-contain), Cover (object-fit-cover), Fill (object-fit-fill), Scale Down (object-fit-scale), None (object-fit-none). Default: no override from this control.
Viewport Size	Applies viewport-relative sizing utilities. For example, vh-100 requests the full viewport height, whereas min-vh-100 allows a section to grow taller than the viewport when its content requires it. These sizes are relative to the viewport, not the parent. Options: Default, Width 100vw (vw-100), Min-Width 100vw (min-vw-100), Height 100vh (vh-100), Min-Height 100vh (min-vh-100). Default: no override from this control.
Placeholder	Applies Bootstrap placeholder styling for a loading skeleton. The placeholder class supplies the visual block, and placeholder-glow or placeholder-wave adds the corresponding effect where supported. For example, use a placeholder span while a title loads. This styling does not fetch data or automatically replace itself with the loaded content. Options: None, This Element (placeholder), Container Glow (placeholder-glow), Container Wave (placeholder-wave). Default: no override from this control.

Check your result

You can select a setting, apply its documented value and check the relevant effect on the page.