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.

Use the following API to setup button appearance:

The following API allows you to manipulate the button on the client side:

@(Html.DevExpress()
    .BootstrapButton("defaultButton")
    .Text("Button")
    .ClientSideEvents(events => events
        .Click("onButtonClick")
    ))
function onButtonClick(args) {
    dxbsDemo.showToast('The button has been clicked.');
}

Sending form data

Pass the true value to the UseSubmitBehavior method to specify that the button should submit form data. All editors whose data should be collected and sent to a controller action must be wrapped in the @using(Html.BeginForm()) { ... } construction.

You can specify the target submit route via the Route method.

@using(Html.BeginForm()) {
    @(Html.DevExpress()
        .BootstrapButton("submitButton")
        .Text("Submit")
        .UseSubmitBehavior(true))
}

Checking

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

The followin client API allows you to manipulate the checked state:

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

<div class="btn-toolbar">
    <div class="btn-group">
        @(Html.DevExpress()
            .BootstrapButton("radioButton1")
            .Text("Option 1")
            .GroupName("Radio")
            .Checked(true))
        @(Html.DevExpress()
            .BootstrapButton("radioButton2")
            .Text("Option 2")
            .GroupName("Radio"))
        @(Html.DevExpress()
            .BootstrapButton("radioButton3")
            .Text("Option 3")
            .GroupName("Radio"))
    </div>
</div>

Render Option

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

<div class="btn-toolbar">
    <div class="btn-group">
        @(Html.DevExpress()
        .BootstrapButton("renderOptionButton1")
        .Text("Link")
        .SettingsBootstrap(settings => settings.RenderOption(BootstrapRenderOption.Link)))
        @(Html.DevExpress()
        .BootstrapButton("renderOptionButton2")
        .Text("Danger")
        .SettingsBootstrap(settings => settings.RenderOption(BootstrapRenderOption.Danger)))
        @(Html.DevExpress()
        .BootstrapButton("renderOptionButton3")
        .Text("Info")
        .SettingsBootstrap(settings => settings.RenderOption(BootstrapRenderOption.Info)))
        @(Html.DevExpress()
        .BootstrapButton("renderOptionButton4")
        .Text("Primary")
        .SettingsBootstrap(settings => settings.RenderOption(BootstrapRenderOption.Primary)))
        @(Html.DevExpress()
        .BootstrapButton("renderOptionButton5")
        .Text("Success")
        .SettingsBootstrap(settings => settings.RenderOption(BootstrapRenderOption.Success)))
        @(Html.DevExpress()
        .BootstrapButton("renderOptionButton6")
        .Text("Warning")
        .SettingsBootstrap(settings => settings.RenderOption(BootstrapRenderOption.Warning)))
    </div>
</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:

@(Html.DevExpress()
    .BootstrapButton("badgeButton")
    .Text("Like")
    .Badge(badge => badge
        .Text("99")
        .IconCssClass("fa fa-thumbs-o-up"))
    .ClientSideEvents(events => events
        .Click("onLikeClick"))
    .SettingsBootstrap(bootstrap => bootstrap.RenderOption(BootstrapRenderOption.Info)))
function onLikeClick(args) {
    var likes = parseInt(this.getBadgeText());
    this.setBadgeText(!isNaN(likes) ? likes + 1 : 1);
}
Screen Size
Color Themes
Demo QR Code