Bootstrap Floating Action Button Demo | DevExpress Bootstrap Controls for ASP.NET

Default Floating Action Button

The DevExpress Bootstrap Floating Action Button is a button that appears in front of a container (HTML element or control) when users interact with the container's elements.

The following types of floating action buttons are available:

Action - Executes the action once users click the floating action button.
Action Group - The floating action button serves as a container for multiple actions (action items). When pressed, the floating action button expands nested actions.

This demo adds an action button to a container and handles button clicks.

ASPX JS Copy

<div class="row justify-content-start">
    <div class="col" style="max-width: 420px;" id="default-fab">
        <div class="card dx-fab-demo-container-height" style="height: 230px;">
            <div class="card-body p-3" style="overflow:hidden">
                <div class="row align-items-center">
                    <div class="col dx-fab-demo-image"></div>
                    <div class="col">
                        <div class="dx-fab-demo-caption" style="max-width: 140px;"></div>
                        <div class="dx-fab-demo-content" style="max-width: 180px;"></div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col dx-fab-demo-image"></div>
                    <div class="col">
                        <div class="dx-fab-demo-caption" style="max-width: 80px;"></div>
                        <div class="dx-fab-demo-content" style="max-width: 120px;"></div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col dx-fab-demo-image"></div>
                    <div class="col">
                        <div class="dx-fab-demo-caption" style="max-width: 160px;"></div>
                        <div class="dx-fab-demo-content" style="max-width: 190px;"></div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col dx-fab-demo-image"></div>
                    <div class="col">
                        <div class="dx-fab-demo-caption" style="max-width: 190px;"></div>
                        <div class="dx-fab-demo-content"></div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col dx-fab-demo-image"></div>
                    <div class="col">
                        <div class="dx-fab-demo-caption" style="max-width: 150px;"></div>
                        <div class="dx-fab-demo-content" style="max-width: 230px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#default-fab" InitialActionContext="c1" HorizontalMargin="35">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
    <ClientSideEvents Init="onDefaulFloatingActionButtonActiontInit" ActionItemClick="onDefaultFloatingActionButtonActionItemClick" />
</dx:BootstrapFloatingActionButton>

function onDefaulFloatingActionButtonActiontInit(s, e) {
    $("#default-fab > .card").mCustomScrollbar({
        theme: "minimal-dark",
        scrollInertia: 300
    });
}
function onDefaultFloatingActionButtonActionItemClick(s, e) {
    dxbsDemo.showToast("The button has been clicked.");
}

Action Group

The Action Group is a DevExpress Bootstrap Floating Action Button type. Action groups serve as containers for multiple actions (action items). When pressed, the action group expands nested actions.

This demo adds an action group to a container. Once a user clicks the action group, two action buttons (Like and Comment) appear. The JS code-behind file handles the button clicks.

ASPX JS Copy

<div class="dx-fab-demo-container-height"></div>
<div class="card border-0">
    <div class="card-body p-0" style="max-width: 230px;" id="action-group"></div>
</div>
<dx:BootstrapFloatingActionButton ID="FABActionGroup" runat="server" ContainerCssSelector="#action-group">
    <ClientSideEvents Init="onActionGroupInit" />
    <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>
    <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);
}

Text Visibility Mode

The BootstrapFloatingActionButton.TextVisibilityMode property specifies the visibility of the floating button's text. The following modes are available:

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.

TextVisibilityMode = "Hidden"

TextVisibilityMode = "OnHover"

TextVisibilityMode = "Always"

ASPX Copy

<div class="row">
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                TextVisibilityMode = "Hidden"
            </div>
            <div class="card-body" id="hidden-mode"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                TextVisibilityMode = "OnHover"
            </div>
            <div class="card-body" id="on-hover-mode"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                TextVisibilityMode = "Always"
            </div>
            <div class="card-body" id="always-mode"></div>
        </div>
    </div>
</div>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#hidden-mode" InitialActionContext="c1" TextVisibilityMode="Hidden">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1" Text="Create Item"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#on-hover-mode" InitialActionContext="c1" TextVisibilityMode="OnHover">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1" Text="Create Item"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#always-mode" InitialActionContext="c1" TextVisibilityMode="Always">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1" Text="Create Item"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>

Horizontal Position

The BootstrapFloatingActionButton.HorizontalPosition property specifies the floating button's horizontal alignment. The available property values are:

LeftEdge - The floating action button is displayed at the container's left edge.
Left - The floating action button is displayed at the left of the container.
Center - The floating action button is displayed in the container's center.
Right - The floating action button is displayed at the right of the container.

HorizontalPosition = "LeftEdge"

HorizontalPosition = "Left"

HorizontalPosition = "Center"

HorizontalPosition = "Right"

ASPX Copy

<div class="row">
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                 HorizontalPosition = "LeftEdge"
            </div>
            <div class="card-body" id="left-edge-position"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                 HorizontalPosition = "Left"
            </div>
            <div class="card-body" id="left-position"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                HorizontalPosition = "Center"
            </div>
            <div class="card-body" id="center-position"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                HorizontalPosition = "Right"
            </div>
            <div class="card-body" id="right-position"></div>
        </div>
    </div>
</div>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#left-edge-position" InitialActionContext="c1" HorizontalPosition="LeftEdge">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton ID="FABHorizontalPositionLeft" runat="server" ContainerCssSelector="#left-position" InitialActionContext="c1" HorizontalPosition="Left" HorizontalMargin="0">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#center-position" InitialActionContext="c1" HorizontalPosition="Center">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#right-position" InitialActionContext="c1" HorizontalPosition="Right">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>

Vertical Position

The BootstrapFloatingActionButton.VerticalPosition property specifies the floating button's vertical alignment. The available property values are:

Bottom - The floating action button is displayed at the bottom of the container.
Top - The floating action button is displayed at the top of the container.
TopEdge - The floating action button is displayed at the container's top edge.

VerticalPosition = "Bottom"

VerticalPosition = "Top"

VerticalPosition = "TopEdge"

ASPX Copy

<div class="row">
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                VerticalPosition = "Bottom"
            </div>
            <div class="card-body" id="bottom-position"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                VerticalPosition = "Top"
            </div>
            <div class="card-body" id="top-position"></div>
        </div>
    </div>
    <div class="col">
        <div class="card dx-fab-demo-container-height">
            <div class="card-header">
                VerticalPosition = "TopEdge"
            </div>
            <div class="card-body" id="top-edge-position"></div>
        </div>
    </div>
</div>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#bottom-position" InitialActionContext="c1" VerticalPosition="Bottom">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton ID="FABVerticalPositionTop" runat="server" ContainerCssSelector="#top-position" InitialActionContext="c1" VerticalPosition="Top">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#top-edge-position" InitialActionContext="c1" VerticalPosition="TopEdge">
    <Items>
        <dx:BootstrapFABAction ActionName="a1" ContextName="c1"></dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>

Render Option

The BootstrapFABActionBootstrapSpecificSettings.RenderOption property specifies Bootstrap-specific styles that can be applied to the floating action button. The available styles are: Danger, Dark, Info, Light, and so on.

ASPX JS Copy

<div class="form-inline">
    <dx:BootstrapComboBox runat="server" ValueType="System.String" SelectedIndex="6" Caption="RenderOption">
        <Items>
            <dx:BootstrapListEditItem Text="Danger" Value="cDanger" />
            <dx:BootstrapListEditItem Text="Dark" Value="cDark" />
            <dx:BootstrapListEditItem Text="Info" Value="cInfo" />
            <dx:BootstrapListEditItem Text="Light" Value="cLight" />
            <dx:BootstrapListEditItem Text="Primary" Value="cPrimary" />
            <dx:BootstrapListEditItem Text="Secondary" Value="cSecondary" />
            <dx:BootstrapListEditItem Text="Success" Value="cSuccess" />
            <dx:BootstrapListEditItem Text="Warning" Value="cWarning" />
        </Items>
        <ClientSideEvents SelectedIndexChanged="function(s) { onApplyLayout(s.GetValue()); }" />
    </dx:BootstrapComboBox>
</div>
<div style="height: 55px;"></div>
<div class="card border-0">
    <div class="card-body" id="render-option"></div>
</div>
<dx:BootstrapFloatingActionButton ClientInstanceName="fab" runat="server" ContainerCssSelector="#render-option" InitialActionContext="cSuccess"
    HorizontalPosition="Left" HorizontalMargin="0">
    <Items>
        <dx:BootstrapFABAction ActionName="action" ContextName="cDanger">
            <SettingsBootstrap RenderOption="Danger" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cDark">
            <SettingsBootstrap RenderOption="Dark" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cInfo">
            <SettingsBootstrap RenderOption="Info" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cLight">
            <SettingsBootstrap RenderOption="Light" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cPrimary">
            <SettingsBootstrap RenderOption="Primary" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cSecondary">
            <SettingsBootstrap RenderOption="Secondary" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cSuccess">
            <SettingsBootstrap RenderOption="Success" />
        </dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="action" ContextName="cWarning">
            <SettingsBootstrap RenderOption="Warning" />
        </dx:BootstrapFABAction>
    </Items>
</dx:BootstrapFloatingActionButton>

function onApplyLayout(index) {
    fab.SetActionContext(index);
}

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 BootstrapFloatingActionButton.Badge property.

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

FABActionItem.GetBadgeText/FABAction.GetBadgeText - Gets the text of the action item/action badge.
FABActionItem.SetBadgeText/FABAction.SetBadgeText - Sets the text of the action item/action badge.
FABActionItem.GetBadgeCssClass/FABAction.GetBadgeCssClass - Gets the CSS class applied to the action item/action badge.
FABActionItem.SetBadgeCssClass/FABAction.SetBadgeCssClass - Sets the CSS class applied to the action item/action badge.
FABActionItem.GetBadgeIconCssClass/FABAction.GetBadgeIconCssClass - Gets the icon CSS class of the action item/action badge.
FABActionItem.SetBadgeIconCssClass/FABAction.SetBadgeIconCssClass - Sets the icon CSS class of the action item/action badge.

ASPX JS Copy

<div class="dx-fab-demo-container-height"></div>
<div class="card border-0">
    <div class="card-body" style="max-width: 240px;" id="fab-badge"></div>
</div>
<dx:BootstrapFloatingActionButton runat="server" ContainerCssSelector="#fab-badge" TextVisibilityMode="Always">
    <ClientSideEvents Init="onInit" />
    <Items>
        <dx:BootstrapFABActionGroup ContextName="messages" Text="Messages">
            <Badge Text="19" CssClass="bg-light text-dark" />
            <Items>
                <dx:BootstrapFABActionItem ActionName="telegram" Text="Telegram" IconCssClass="fab fa-telegram">
                    <Badge Text="14" CssClass="bg-danger" />
                </dx:BootstrapFABActionItem>
                <dx:BootstrapFABActionItem ActionName="skype" Text="Skype" IconCssClass="fab fa-skype">
                    <Badge Text="5" CssClass="bg-danger" />
                </dx:BootstrapFABActionItem>
                <dx:BootstrapFABActionItem ActionName="facebook" Text="Facebook" IconCssClass="fab fa-facebook">
                </dx:BootstrapFABActionItem>
            </Items>
        </dx:BootstrapFABActionGroup>
    </Items>
</dx:BootstrapFloatingActionButton>

function onInit(s, e) {
    s.SetActionContext("messages", true);
}

Default Floating Action Button

Action Group

Text Visibility Mode

Horizontal Position

Vertical Position

Render Option

Badge

Screen Size

Color Themes

Demo QR Code