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.

• Button.Text - specifies the text within the button.
• Button.CssClasses.Icon - specifies the icon within the button.
• ClientButton.DoClick - simulates the button click.
• ClientButton.GetText / ClientButton.SetText - get/sets the text displayed within the button.
• Button.Click / ClientButton.Click - occurs on the client/server side after the button is clicked.

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

• Click - occurs when a button is clicked.
• CheckedChanged - occurs when a button's checked state is changed.
• PostBackUrl - specifies the URL of the page to post when the button is clicked.

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

• GroupName - joins multiple buttons into a radio group
• Checked - specifies whether the current button is selected within the radio group
• ClientButton.GetChecked / ClientButton.SetChecked - gets/sets the button's checked state
• ClientButton.CheckedChanged - occurs when the button's checked state is changed

<div class="btn-group">
    <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.

• SettingsBootstrap.RenderOption - specifies the button style

<dx:BootstrapButton runat="server" Text="Primary" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Primary" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Secondary" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Secondary" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Success" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Success" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Danger" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Danger" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Warning" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Warning" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Info" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Info" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Light" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Light" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Dark" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Dark" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Link" AutoPostBack="false">
    <SettingsBootstrap RenderOption="Link" />
</dx:BootstrapButton>

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:

• BootstrapButton.Badge - Gets or sets the button badge on the server.

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

• BootstrapClientButton.GetBadgeText - Gets the text of the button badge.
• BootstrapClientButton.SetBadgeText - Sets the text of the button badge.
• BootstrapClientButton.GetBadgeIconCssClass - Gets the icon CSS class of the button badge.
• BootstrapClientButton.SetBadgeIconCssClass - Sets the icon CSS class of the button badge.

<dx:BootstrapButton runat="server" Text="Like" AutoPostBack="false">
    <Badge Text="99" IconCssClass="far fa-thumbs-up" />
    <ClientSideEvents Click="onLikeClick" />
    <SettingsBootstrap RenderOption="Info" />
</dx:BootstrapButton>

function onLikeClick(s, e) {
    var likes = parseInt(s.GetBadgeText());
    s.SetBadgeText(!isNaN(likes) ? likes + 1 : 1);
}

Screen Size

Color Themes

Demo QR Code