Navbars

The main use of the NavBar component is to place a navigation menu at top, bottom or both of your web application or web page.

The NavBar typically will have a brand, that could be, for example, the name of your project.

Sticky vs. non-sticky navBars and navBar positions updated in 0.8.5

A navbar can be rendered in different ways, to fit in your page layout scheme.

The default NavBar appears as part of the page content, typically centered and at the beginning.

The two other ways a Navigation Bar can be rendered in the page are:

Starting with BootsFaces 0.8.5, there's the attribute position as a more expressive alternative:

position="top" sticky="true" fixed="top" sticky="true" Sticky NavBar at the top. The page scrolls under the NavBar.
position="top" sticky="false" fixed="top" sticky="false" NavBar at the top. The NavBar scrolls with the page.
position="bottom" sticky="true" fixed="bottom" sticky="true" Sticky NavBar at the bottom. The page scrolls under the NavBar.
position="bottom" sticky="false" fixed="non-sticky" sticky="false" Non-sticky NavBar at the bottom. The NavBar scrolls with the page.
sticky="false" sticky="false" Non-sticky NavBar at the current position. The NavBar scrolls with the page.

To understand the different layouts better, just have a look at the NavBar examples.


Using the b:navbar tag

Using the b:navbar tag is very straightforward, as you can see from the following table you need to specify few attributes:

Widget attributes
b:navbar
Attribute Type Description
brand String Brand for the Navbar.
brandHref String Link URL for the Navbar Brand.
static boolean If true, a full-width navbar that scrolls away with the page will be rendered. Can be true or false, default false.
fixed String If specified, the Fixed Bar will be rendered on top or bottom of the page. Can be bottom or top.
inverse boolean Boolean value to specify if Navbar should use inverse color scheme.

Inverted Navbar

Modify the look of the navbar by adding the inverse attribute:

Live preview


Navbar Links

A NavBar will also contain a set of links. You can add the links to b:navbar using b:navLink as you do with b:listLinks.

The difference is that you nest the b:navLink elements inside a b:navbarLinks element instead of b:listLinks element.


Navbar CommandLinks since 0.7.0

For some technical reason, the <b:navLink /> component can't call JSF action listeners. To circumvent this limitation, there's a second component, <b:navCommandLink /> that's adds calls to JSF action listeners and a JSF action.


Drop Menus

You can build up a rich menu bar using another useful element: b:dropMenu. It is another element where you can put your b:navLink elements.

You can have multiple b:navbarLinks and b:dropMenu elements in a navbar, just pay attention to the resulting layout. Starting with BootsFaces 0.8.0, b:dropMenus can also be nested. This way, you get menu of three or more levels. Of course, you shouldn't overdo it. Most of the time, two levels is what users accept. They also accept a third level if it remains the exception. But adding a fourth level makes your application cumbersome.

Live preview


Reference section

Attribute Default value Description
alt Brand alternative text
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
brand (none) Brand for the Navbar.
brand-align
brandAlign (alternative writing)
(none) Brand alignment, can be right or left.
brand-href
brandHref (alternative writing)
(none) Link URL for the Navbar Brand.
brand-img
brandImg (alternative writing)
(none) Optional brand image.
brand-img-style
brandImgStyle (alternative writing)
(none) CSS inline style of the brand image.
brand-img-style-class
brandImgStyleClass (alternative writing)
(none) CSS style class of the brand image.
brand-style
brandStyle (alternative writing)
(none) Inline style of the optional navBar brand.
brand-style-class
brandStyleClass (alternative writing)
(none) CSS style class of the optional navBar brand.
brand-target
brandTarget (alternative writing)
(none) Optional target of the HTML anchor tag that's rendered for the brand image. E.g. # opens the link in a new tab. This attribute is only evaluated if you provide a brand-href.
content-disabled
contentDisabled (alternative writing)
false Enables or disables every child element of this container. By default, child elements are enabled.
fixed (none) Deprecated (use position and sticky instead). If specified, the Fixed Bar will be rendered on top or bottom of the page. Can be "bottom", "top" or "non-sticky". The latter is a footer that scrolls with the page.
fluid false Boolean value default is false; when set to true the navbar container will be "fluid": a full width container, spanning the entire width of the viewport.
id (none) Unique identifier of the component in a namingContainer.
inverse false Boolean value to specify if Navbar should use inverse color scheme.
onclick (none) JavaScript function which is called when the widget is clicked.
position (none) Position of the navBar. Legal values: "top", "bottom" or "inline". The default value is "top".
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
static false Deprecated (use position and sticky instead). If true, a full-width navbar that scrolls away with the page will be rendered. Can be true or false, default false.
sticky true Determines whether the navBar is pinned at its default position (i.e. sticky="true"), or if it scrolls with the page (sticky="false").
style (none) Inline style of the navBar element.
style-class
styleClass (alternative writing)
(none) Style class of the navBar element.
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".
Attribute Default value Description
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
content-disabled
contentDisabled (alternative writing)
false Enables or disables every child element of this container. By default, child elements are enabled.
id (none) Unique identifier of the component in a namingContainer.
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.
style (none) Inline style of the input element.
style-class
styleClass (alternative writing)
(none) Style class of this element.
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".
Attribute Default value Description
action (none) The button action, this can be method expression or a string outcome.
action-listener
actionListener (alternative writing)
(none) A method expression that refers to a method with this signature: void methodName(Action-Event).
active false Adds the active state to the link.
ajax false Whether the navLink submits the form with AJAX.
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-class
contentClass (alternative writing)
(none) content-class is optional: if specified, the content (i.e. the anchor tag) will be displayed with this specific class
content-style
contentStyle (alternative writing)
(none) Inline style of the content area (i.e the anchor tag).
disabled false Boolean value to specify if the button is disabled.
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.
header (none) If present, this element is rendered as Header in a menu with the text specifide by this attribute value: all other attributes will be ignored.
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) Navigation Link Icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute.
icon-align
iconAlign (alternative writing)
(none) Alignment can be right or left.
icon-awesome
iconAwesome (alternative writing)
(none) Navigation Link Font Awesome Icon, 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.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
include-view-params
includeViewParams (alternative writing)
false Set whether or not the page parameters should be encoded into the target url.
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.
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.
oncomplete (none) JavaScript to be executed when ajax completes with success.
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.
onselect (none) Client side callback to execute when text within input element is selected by user.
outcome (none) The outcome to navigate to.
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be 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
style-class
styleClass (alternative writing)
(none) CSS style class
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.
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".
update (none) Component(s) to be updated with ajax.
value (none) Navigation Link text.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
Attribute Default value Description
action (none) The button action, this can be method expression or a string outcome.
action-listener
actionListener (alternative writing)
(none) A method expression that refers to a method with this signature: void methodName(Action-Event).
active false Adds the active state to the link.
ajax false Whether the navLink submits the form with AJAX.
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-class
contentClass (alternative writing)
(none) content-class is optional: if specified, the content (i.e. the anchor tag) will be displayed with this specific class
content-style
contentStyle (alternative writing)
(none) Inline style of the content area (i.e the anchor tag).
disabled false Boolean value to specify if the button is disabled.
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.
header (none) If present, this element is rendered as Header in a menu with the text specifide by this attribute value: all other attributes will be ignored.
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) Navigation Link Icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute.
icon-align
iconAlign (alternative writing)
(none) Alignment can be right or left.
icon-awesome
iconAwesome (alternative writing)
(none) Navigation Link Font Awesome Icon, 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.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
include-view-params
includeViewParams (alternative writing)
false Set whether or not the page parameters should be encoded into the target url.
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.
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.
oncomplete (none) JavaScript to be executed when ajax completes with success.
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.
onselect (none) Client side callback to execute when text within input element is selected by user.
outcome (none) The outcome to navigate to.
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be 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
style-class
styleClass (alternative writing)
(none) CSS style class
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.
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".
update (none) Component(s) to be updated with ajax.
value (none) Navigation Link text.
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-class
contentClass (alternative writing)
(none) content-class is optional: if specified, the content will be displayed with this specific class
content-disabled
contentDisabled (alternative writing)
false Enables or disables every child element of this container. By default, child elements are enabled.
content-style
contentStyle (alternative writing)
(none) Inline style of the content area.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
drop (none) Use up For Dropup and down for Dropdown, default is down.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
icon (none) Navigation Link Icon, can be one of the Bootstrap's Glyphicons icon names. Alignment can be specified with the icon-align attribute.
icon-align
iconAlign (alternative writing)
(none) Alignment can be right or left.
icon-awesome
iconAwesome (alternative writing)
(none) Navigation Link Font Awesome Icon, 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.
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.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be 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.
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".
value (none) The Label for the Dropdown.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.