Default Radio Button

This example demonstrates the Bootstrap Radio Button control with default settings. The Bootstrap Radio Button editor allows an end-user to perform a single-option selection.

<dx:BootstrapRadioButton runat="server" Text="RadioButton1" GroupName="RadioGroup" Checked="true">
</dx:BootstrapRadioButton>
<dx:BootstrapRadioButton runat="server" Text="RadioButton2" GroupName="RadioGroup">
</dx:BootstrapRadioButton>

Badge

Badges contain supplementary information and can display an icon and/or text. Use the BootstrapRadioButton.Badge property and the corresponding object's settings to configure the badge:

  • Badge.Text - Specifies the text in the badge.
  • Badge.CssClass - Specifies the name of a CSS class applied to the badge element.
<dx:BootstrapRadioButton runat="server" Text="RadioButton1" GroupName="BadgeGroup" Checked="true">
    <Badge Text="Badge" />
</dx:BootstrapRadioButton>
<dx:BootstrapRadioButton runat="server" Text="RadioButton2" GroupName="BadgeGroup">
    <Badge Text="Badge" CssClass="bg-primary"/>
</dx:BootstrapRadioButton>
<dx:BootstrapRadioButton runat="server" Text="RadioButton3" GroupName="BadgeGroup">
    <Badge Text="Badge" CssClass="bg-danger"/>
</dx:BootstrapRadioButton>
Screen Size
Color Themes
Demo QR Code