BootsFaces lets you group a series of buttons together on a single line using the <b:buttonGroup>
component.
Wrap a series of <b:button>
s or <b:commandButton>
s by enclosing them in a <b:buttonGroup>
.
You can go further and obtain a Toolbar combining sets of <b:buttonGroup>
s inside a <b:buttonToolbar>
Instead of applying button size attribute to every button in a group, just add the size attribute to the <b:buttonGroup>
.
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.
Make a set of buttons appear vertically stacked rather than horizontally, using the orientation="vertical"
attribute.
Attribute | Default value | Description |
---|---|---|
accesskey | (none) | Access key to transfer focus to the input element. |
auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
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-brand iconBrand (alternative writing) |
false | Use the free brand font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
icon-flip iconFlip (alternative writing) |
(none) | Flip the icon: can be H (horizontal) or V (vertical). |
icon-inverse iconInverse (alternative writing) |
false | Switch the icon from black-on-white to white-on-black. |
icon-light iconLight (alternative writing) |
false | Use the paid 'light' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
icon-pulse iconPulse (alternative writing) |
false | Boolean value: if true the icon will rotate with 8 discrete steps. |
icon-regular iconRegular (alternative writing) |
false | Use the paid 'regular' font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
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 (=133%), 2x, 3x, 4x, 5x. If you're using Fontawesome 5, also 6x, 7x, 8x, 9, 10x, xs (=75%), and sm (=87.5%) are allowed. |
icon-solid iconSolid (alternative writing) |
false | Use the free font of FontAwesome 5. As a side effect, every FontAwesome icon on the same page is switched to FontAwesome 5.2.0. By default, the icon set is the older version 4.7.0. |
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 |
---|---|---|
auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
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. |