Default Button

This example demonstrates the Bootstrap Button control with default settings. The Bootstrap Button control extends the standard button functionality by implementing an enhanced API, which you can use to manipulate the button's properties and respond to button events both in client-side and server-side code. In this demo, the client-side Click event is handled to display a text message.

<dx:BootstrapButton runat="server" Text="Button" AutoPostBack="false">
    <ClientSideEvents Click="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
</dx:BootstrapButton>

AutoPostBack

The AutoPostBack property allows you to define whether or not a button automatically initiates a postback to the server when clicked. The AutoPostback mode is activated automatically if the button has the server-side event handlers.

<dx:BootstrapButton runat="server" Text="Submit" AutoPostBack="true">
</dx:BootstrapButton>

Checking

This example demonstrates how to create a Radio Group UI using button controls. Only one button can be selected at a time.

You can set the GroupName to a unique value to force the button to change its checked state on every click.

<div class="btn-toolbar">
    <dx:BootstrapButton runat="server" Text="Option 1" AutoPostBack="false" GroupName="Radio" Checked="true">
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Option 2" AutoPostBack="false" GroupName="Radio">
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Option 3" AutoPostBack="false" GroupName="Radio">
    </dx:BootstrapButton>
</div>

Render Option

This example demonstrates buttons of various styles supported by the Bootstrap Framework.

<div class="btn-toolbar">
    <dx:BootstrapButton runat="server" Text="Link" AutoPostBack="false">
        <SettingsBootstrap RenderOption="Link" />
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Danger" AutoPostBack="false">
        <SettingsBootstrap RenderOption="Danger" />
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Info" AutoPostBack="false">
        <SettingsBootstrap RenderOption="Info" />
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Primary" AutoPostBack="false">
        <SettingsBootstrap RenderOption="Primary" />
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Success" AutoPostBack="false">
        <SettingsBootstrap RenderOption="Success" />
    </dx:BootstrapButton>
    <dx:BootstrapButton runat="server" Text="Warning" AutoPostBack="false">
        <SettingsBootstrap RenderOption="Warning" />
    </dx:BootstrapButton>
</div>

Badge

The Button can display supplementary information within a badge. A badge can display a text, an icon or both. Use the following API to set a badge:

The methods listed below allow you to manipulate the badge on the client:

<dx:BootstrapButton runat="server" Text="Like" AutoPostBack="false">
    <Badge Text="99" IconCssClass="fa fa-thumbs-o-up" />
    <ClientSideEvents Click="onLikeClick" />
</dx:BootstrapButton>
Screen Size
Color Themes
Demo QR Code