Button Group — Reference

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

Button Group

Groups a set of buttons on a single line. Place multiple Button components inside; enable sizing, vertical, or justified options if available.

Button Group 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.
Aria Label	ARIA label for the button group. Sets an ARIA label for accessibility. Use it to describe the purpose of the group to assistive technologies. Bootstrap docs: Button group Default: "". Attribute: aria-label.
Size	Button group size. Controls the size of buttons within a button group. Applies size classes such as btn-group-sm or btn-group-lg when supported. Bootstrap docs: Button group sizing Options: Default, Large (btn-group-lg), Small (btn-group-sm) Default: "".
Vertical	Vertical button group. Stacks buttons vertically instead of horizontally. Applies btn-group-vertical when supported by the rule. Bootstrap docs: Vertical variation Default: false.

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.

Flex Item

Name	Description
Align Self	Overrides cross-axis alignment for this item within a flex container. For example, align-self-center centers a button vertically in a horizontal flex row. It requires a flex parent and is different from text alignment inside the button. Options: Start (align-self-start), Center (align-self-center), End (align-self-end), Stretch (align-self-stretch), Baseline (align-self-baseline).
Order	Changes visual ordering within a flex or grid layout without moving the element in the source. For example, order-first places an item before siblings with normal order. Keyboard and reading order still follow the document. Use supported classes: the bundled Bootstrap order scale contains 0–5 plus first/last; higher choices offered by an inspector need matching custom utilities. Options: First (first), 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, Last (last), D. Default: no override from this control.
Grow	Controls whether the item can consume free space along its flex parent’s main axis. flex-grow-1 allows growth; flex-grow-0 prevents it. For example, let a search field grow while its adjacent submit button keeps its content width. Growth does not guarantee equal widths when items have different bases. Options: Full (flex-grow-1), None (flex-grow-0). Default: no override from this control.
Shrink	Controls whether the item can shrink when its flex row lacks space. flex-shrink-0 preserves its basis and can cause overflow; flex-shrink-1 allows shrinking. For example, prevent a small icon from being squeezed while allowing the label beside it to shrink. Options: Full (flex-shrink-1), None (flex-shrink-0). 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.