The BootstrapFloatingActionButton control is a button that appears in front of a container (HTML element or control) when users interact with the container's elements.
The BootstrapFloatingActionButton stores its items in the Items collection. The are two available Floating Action Button's item types:
- Action that executes the specified action once users click the button.

- Action Group that serves as a container for multiple actions (action items).

Action
To create an Action, use a BootstrapFABAction object as shown in the following example:
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#default-fab">
<Items>
<dx:BootstrapFABAction ActionName="a1" ContextName="context1" Text="Create Item"/>
</Items>
</dx:BootstrapFloatingActionButton>
For more information about BootstrapFABAction settings, refer to the table below::
Member
| Description
|
---|
ActionName
| Specifies the action identifier within the actions collection.
|
ContextName
| Specifies the context name. The context defines which Floating Action Button's item (Action or Action Group) is active.
|
Text
| Specifies the action's text.
|
IconCssClass
| Provides access to the action's image settings.
|
Action Group
To create an Action Group, use a BootstrapFABActionGroup object as shown in the following example:
<dx:BootstrapFloatingActionButton ID="FABActionGroup" runat="server" ContainerCssSelector="#action-group">
<ClientSideEvents Init="onActionGroupInit" />
<Items>
<dx:BootstrapFABActionGroup ContextName="c1">
<Items>
<dx:BootstrapFABActionItem ActionName="comment" Text="Comment" IconCssClass="far fa-comment"></dx:BootstrapFABActionItem>
<dx:BootstrapFABActionItem ActionName="like" Text="Like" IconCssClass="far fa-thumbs-up"></dx:BootstrapFABActionItem>
</Items>
</dx:BootstrapFABActionGroup>
</Items>
<ClientSideEvents ActionItemClick="onFloatingActionButtonActionItemClick" />
</dx:BootstrapFloatingActionButton>
function onFloatingActionButtonActionItemClick(s, e) {
dxbsDemo.showToast("The '" + e.actionName + "' action item has been clicked.");
}
function onActionGroupInit(s, e) {
s.SetActionContext("c1", true);
}
For more information about BootstrapFABActionGroup settings, refer to the table below::
Member
| Description
|
---|
ContextName
| Specifies the context name. The context defines which Floating Action Button's item (Action or Action Group) is active.
|
Text
| Specifies the action group's text.
|
CollapseIconCssClass
| Provides access to the collapse image settings.
|
ExpandIconCssClass
| Provides access to the expand image settings.
|
Each BootstrapFABActionGroup object stores its action items in the Items collection. An Action Item ( BootstrapFABActionItem ) provides the following settings:
Member
| Description
|
---|
ActionName
| Specifies the action item's name.
|
Text
| Specifies the action item's text.
|
IconCssClass
| Provides access to the action item's image settings.
|
Main Features
The Bootstrap Floating Action Button includes the following features:
Specify a Container Control
You can associate the Floating Action Button with any HTML element or web control on a page. For this purpose, use the ContainerCssSelector property. The button is displayed over the specified container.
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#default-fab" InitialActionContext="c1">
<Items>
<dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
</Items>
</dx:BootstrapFloatingActionButton>
Position

The table below lists properties and their corresponding enumerations used to specify a Floating Action Button's position.
Customizable Appearance
The Floating Action Button provides users with the following appearance-related features:
Bootstrap-Specific Render

The RenderOption property specifies Bootstrap-specific styles that can be applied to the Floating Action Button. The BootstrapFloatingActionButtonRenderOption enumeration defines the available styles.
<dx:BootstrapFloatingActionButton ClientInstanceName="fab" runat="server" ContainerCssSelector="#render-option" InitialActionContext="cSuccess">
<Items>
<dx:BootstrapFABAction ActionName="action" ContextName="cDanger">
<SettingsBootstrap RenderOption="Danger" />
</dx:BootstrapFABAction>
<dx:BootstrapFABAction ActionName="action" ContextName="cDark">
<SettingsBootstrap RenderOption="Dark" />
</dx:BootstrapFABAction>
<%-- ... --%>
</Items>
</dx:BootstrapFloatingActionButton>
Image

Use the following API to specify an image for a Floating Action Button and nested action items:
<dx:BootstrapFloatingActionButton ID="FABActionGroup" runat="server" ContainerCssSelector="#action-group">
<Items>
<dx:BootstrapFABActionGroup ContextName="c1" ExpandIconCssClass="far fa-comments">
<Items>
<dx:BootstrapFABActionItem ActionName="comment" Text="Comment" IconCssClass="far fa-comment"></dx:BootstrapFABActionItem>
<dx:BootstrapFABActionItem ActionName="like" Text="Like" IconCssClass="far fa-thumbs-up"></dx:BootstrapFABActionItem>
</Items>
</dx:BootstrapFABActionGroup>
</Items>
</dx:BootstrapFloatingActionButton>
Text

The Text property specifies the button's text, and you can use the TextVisibilityMode property to specify the text's visibility.
- Hidden – The button text is always hidden.
- OnHover – The button text is only displayed when users hover the mouse pointer over the Floating Action Button.
- Always – The button text is always visible.
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#on-hover-mode" TextVisibilityMode="OnHover">
<Items>
<dx:BootstrapFABAction ActionName="a1" ContextName="c1" Text="Create Item"></dx:BootstrapFABAction>
</Items>
</dx:BootstrapFloatingActionButton>
Note
The text of Action Items in Action Groups is displayed on the left of the corresponding items.
Badge

The Floating Action Button control can display supplementary information action items and/or action buttons within a badge. A badge can display text and/or icon. To access the badge’s contents on the server, use the Badge property.
You can use the methods listed below to manage badges on the client:
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#fab-badge">
<Items>
<dx:BootstrapFABActionGroup ContextName="messages" Text="Messages">
<Badge Text="19" CssClass="badge-light" />
<Items>
<dx:BootstrapFABActionItem ActionName="telegram" Text="Telegram" IconCssClass="fab fa-telegram">
<Badge Text="14" CssClass="badge-danger" />
</dx:BootstrapFABActionItem>
<dx:BootstrapFABActionItem ActionName="skype" Text="Skype" IconCssClass="fab fa-skype">
<Badge Text="5" CssClass="badge-danger" />
</dx:BootstrapFABActionItem>
<dx:BootstrapFABActionItem ActionName="facebook" Text="Facebook" IconCssClass="fab fa-facebook">
</dx:BootstrapFABActionItem>
</Items>
</dx:BootstrapFABActionGroup>
</Items>
</dx:BootstrapFloatingActionButton>
Full-Featured Client-Side Functionality
On the client side, use the BootstrapClientFloatingActionButton class to interact with the control as specified below:
Online Demos
To see Bootstrap Floating Action Button and its features in action, refer the links below: