[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Collapse]ASP.NET Bootstrap Controls
  Overview
 [Expand]Getting Started
 [Expand]Demos and Sample Applications
 [Expand]Project Configuration
 [Expand]Grid View
 [Expand]Card View
 [Expand]Scheduler
 [Expand]Spreadsheet
 [Expand]Rich Text Editor
 [Expand]Charts
  Sparkline
 [Expand]Data Editors
 [Collapse]Site Navigation
   Accordion
   Floating Action Button
   Menu
   Pager
  [Expand]Ribbon
   Tab Control
   Toolbar
   Tree View
 [Expand]Site Layout
  File Manager
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Floating Action Button

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.

Expanded Button Types

The BootstrapFloatingActionButton stores its items in the BootstrapFloatingActionButton.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:

For more information about BootstrapFABAction settings, refer to the table below::

Member

Description

FABCollectionItemBase.ActionName

Specifies the action identifier within the actions collection.

FABActionBase.ContextName

Specifies the context name. The context defines which Floating Action Button's item (Action or Action Group) is active.

FABCollectionItemBase.Text

Specifies the action's text.

BootstrapFABAction.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:

For more information about BootstrapFABActionGroup settings, refer to the table below::

Member

Description

FABActionBase.ContextName

Specifies the context name. The context defines which Floating Action Button's item (Action or Action Group) is active.

FABCollectionItemBase.Text

Specifies the action group's text.

BootstrapFABActionGroup.CollapseIconCssClass

Provides access to the collapse image settings.

BootstrapFABActionGroup.ExpandIconCssClass

Provides access to the expand image settings.

Each BootstrapFABActionGroup object stores its action items in the BootstrapFABActionGroup.Items collection. An Action Item ( BootstrapFABActionItem ) provides the following settings:

Member

Description

FABCollectionItemBase.ActionName

Specifies the action item's name.

FABCollectionItemBase.Text

Specifies the action item's text.

BootstrapFABActionItem.IconCssClass

Provides access to the action item's image settings.

Expanded 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 BootstrapFloatingActionButton.ContainerCssSelector property. The button is displayed over the specified container.

Position

The table below lists properties and their corresponding enumerations used to specify a Floating Action Button's position.

Position

Property

Values

Vertical

ASPxFloatingActionButton.VerticalPosition

FloatingActionButtonVerticalPosition

Horizontal

ASPxFloatingActionButton.HorizontalPosition

FloatingActionButtonHorizontalPosition

Customizable Appearance

The Floating Action Button provides users with the following appearance-related features:

Bootstrap-Specific Render

The BootstrapFABActionBootstrapSpecificSettings.RenderOption property specifies Bootstrap-specific styles that can be applied to the Floating Action Button. The BootstrapFloatingActionButtonRenderOption enumeration defines the available styles.

Image

Use the following API to specify an image for a Floating Action Button and nested action items:

Text

The FABCollectionItemBase.Text property specifies the button's text, and you can use the ASPxFloatingActionButton.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.
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 BootstrapFABActionBase.Badge property.

You can use the methods listed below to manage badges on the client:

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:

Is this topic helpful?​​​​​​​