Input Group Text — Reference

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

Input Group Text

Input Group Text settings and events. Select the component in App Structure to find these controls in Properties.

Input Group Text Properties

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.
Type	Options: Span (span), Label (label), Div (div) Default: "span".
For	Default: "". Attribute: for.
Text	Edits the first child text node of the selected element, adding one at the beginning if needed. Use this for the visible label; edit the link destination, image or other child settings separately. Replace the sample wording with a concise label appropriate to its position, then preview long text at a narrow width.

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.

Spacing

Name	Description
Margin and Padding	Sets outer margin and inner padding utilities for the selected viewport breakpoint. For example, at MD, bottom margin 3 becomes mb-md-3; without a breakpoint, p-3 adds padding on every side. Start/End follow writing direction. The spacing scale comes from the project theme. Negative margin classes require a stylesheet built with negative-margin utilities enabled; the bundled default disables them. Options: mt-0, mt-1, mt-2, mt-3, mt-4, mt-5, mt-n1, mt-n2, mt-n3, mt-n4, mt-n5, mt-auto, mb-0, mb-1, mb-2, mb-3, mb-4, mb-5, mb-n1, mb-n2, mb-n3, mb-n4, mb-n5, mb-auto, ms-0, ms-1, ms-2, ms-3, ms-4, ms-5, ms-n1, ms-n2, ms-n3, ms-n4, ms-n5, ms-auto, me-0, me-1, me-2, me-3, me-4, me-5, me-n1, me-n2, me-n3, me-n4, me-n5, me-auto, mx-0, mx-1, mx-2, mx-3, mx-4, mx-5, mx-n1, mx-n2, mx-n3, mx-n4, mx-n5, mx-auto, my-0, my-1, my-2, my-3, my-4, my-5, my-n1, my-n2, my-n3, my-n4, my-n5, my-auto, m-0, m-1, m-2, m-3, m-4, m-5, m-n1, m-n2, m-n3, m-n4, m-n5, m-auto, pt-0, pt-1, pt-2, pt-3, pt-4, pt-5, pb-0, pb-1, pb-2, pb-3, pb-4, pb-5, ps-0, ps-1, ps-2, ps-3, ps-4, ps-5, pe-0, pe-1, pe-2, pe-3, pe-4, pe-5, px-0, px-1, px-2, px-3, px-4, px-5, py-0, py-1, py-2, py-3, py-4, py-5, p-0, p-1, p-2, p-3, p-4, p-5.
X Gutter	Sets the horizontal Bootstrap row gutter through a gx-* utility. For example, gx-3 changes the spacing between columns when applied to a Bootstrap row. It works through the row and column gutter rules; adding it to an unrelated element does not create a column layout. Options: 0 (gx-0), 1 (gx-1), 2 (gx-2), 3 (gx-3), 4 (gx-4), 5 (gx-5). Default: no override from this control.
Y Gutter	Sets the vertical Bootstrap row gutter through a gy-* utility. For example, gy-3 adds space between wrapped rows of columns. It does not replace padding inside a card or change the spacing of a non-grid element by itself. Options: 0 (gy-0), 1 (gy-1), 2 (gy-2), 3 (gy-3), 4 (gy-4), 5 (gy-5). Default: no override from this control.

Display

Name	Description
Hide on	Hides the element at selected viewport ranges by adding responsive display utilities. For example, hiding below MD produces d-none with a restoring display class at MD. The control uses the component’s normal display type when restoring it. This hides layout and content visually; it does not protect private data or stop a server endpoint being called. Options: Hide on mobile (xs), Hide on landscape mobile (sm), Hide on tablet (md), Hide on laptop (lg), Hide on desktop (xl), Hide on extra wide (xxl).
Print	Controls whether this element appears in printed output. Hide writes d-print-none. Show restores the component’s display type for print, such as d-print-block or d-print-table-row. For example, hide a navigation bar when printing a report. Check browser print preview because screen layout alone does not show this setting. Options: Show (d-print-block), Hide (d-print-none).
Visually Hidden	Adds visually-hidden: content remains available to assistive technologies while it is visually clipped. Use it for an accessible label that should not appear on screen, not for hiding private data. It is different from display:none, which also removes the element from layout and generally from the accessibility tree. Default: off.
Focusable	Adds visually-hidden-focusable, which hides the element until it or a descendant receives focus. A skip link is a typical example. The element must already be focusable, such as an anchor with href; this class does not add keyboard focusability. Do not combine it with an unconditional visually-hidden class, which would keep it hidden even when focused. Default: off.

Check your result

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