Button Groups and Toolbars

BootsFaces lets you group a series of buttons together on a single line using the <b:buttonGroup> component.

Basic example

Wrap a series of <b:button>s or <b:commandButton>s by enclosing them in a <b:buttonGroup> .

Live preview

Button toolbar

You can go further and obtain a Toolbar combining sets of <b:buttonGroup>s inside a <b:buttonToolbar>

Live preview

Sizing

Instead of applying button size attribute to every button in a group, just add the size attribute to the <b:buttonGroup>.

Live preview

Mixed Button Groups

If you want dropdown menus mixed with a series of buttons, just add the <b:dropButton> inside the <b:buttonGroup>.

You can even use different looks and/or icons for your buttons, if you need to.

Live preview

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally, using the orientation="vertical" attribute.

Live preview


Reference section

Attribute Default value Description
accesskey (none) Access key to transfer focus to the input element.
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
dir (none) Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content).
disabled false Boolean value to specify if the button is disabled.
dismiss (none) This attribute is mapped to the HTML5 data-dismiss custom attribute.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
fragment (none) The fragment that is to be appended to the target URL. The # separator is applied automatically and needs not be included.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
href (none) Specifies the URL of the page the link goes to.
icon (none) Button Icon, can be one of the Bootstrap icon names. Alignment can be specified with icon-align attribute.
icon-align
iconAlign (alternative writing)
(none) Alignment can be right or left.
icon-awesome
iconAwesome (alternative writing)
(none) Font Awesome Icon to show in this Button, can be one of the Font Awesome icon names. Alignment can be specified with the icon-align attribute.
icon-flip
iconFlip (alternative writing)
(none) Flip the icon: can be H (horizontal) or V (vertical).
icon-rotate
iconRotate (alternative writing)
(none) Rotate 90 degrees the icon: Can be L,R.
icon-size
iconSize (alternative writing)
(none) Icon Size: legal values are lg, 2x, 3x, 4x, 5x.
icon-spin
iconSpin (alternative writing)
false Boolean value: if true the icon will spin.
id (none) Unique identifier of the component in a namingContainer.
lang (none) Code describing the language used in the generated markup for this component.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
look (none) Look of the Button, can be primary, block, info, success, warning, important, error, inverse. If not specified, Standard gray button with gradient is rendered.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
onblur (none) Client side callback to execute when input element loses focus.
onchange (none) Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick (none) The onclick attribute.
ondblclick (none) Client side callback to execute when input element is double clicked.
onfocus (none) Client side callback to execute when input element receives focus.
onkeydown (none) Client side callback to execute when a key is pressed down over input element.
onkeypress (none) Client side callback to execute when a key is pressed and released over input element.
onkeyup (none) Client side callback to execute when a key is released over input element.
onmousedown (none) Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove (none) Client side callback to execute when a pointer input element is moved within input element.
onmouseout (none) Client side callback to execute when a pointer input element is moved away from input element.
onmouseover (none) Client side callback to execute when a pointer input element is moved onto input element.
onmouseup (none) Client side callback to execute when a pointer input element is released over input element.
outcome (none) The outcome to navigate to.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
size (none) Size of the button, can be large ('lg'), small ('sm'), or tiny ('xs'). If not specified, standard size button is rendered.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tabindex (none) Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.
target (none) Optional target of the HTML anchor tag that's rendered. E.g. # opens the link in a new tab. This attribute is only evaluated if you provide an href.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
title (none) Advisory tooltip information.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
value (none) Optional button caption.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
Attribute Default value Description
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
content-disabled
contentDisabled (alternative writing)
false Enables or disables every child element of this container. By default, child elements are enabled.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id (none) Unique identifier of the component in a namingContainer.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
orientation (none) Orientation can be horizontal(default) or vertical.
pull (none) Can be right or left. Pulls the element right or left.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
size (none) Size of the grouped Buttons, can be lg, sm or xs.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.