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) { alert('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.

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

Radio Buttons

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

  • GroupName - joins multiple buttons into a radio group
  • Checked - specifies whether the current button is selected within the radio group
<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>
Screen Size
Color Themes
Demo QR Code