Default Radio Button List

This example demonstrates the Bootstrap Radio Button List control with default settings. The Bootstrap Radio Button List editor is a radio button group that provides end-users with the capability to select a single item at a time.

<dx:BootstrapRadioButtonList runat="server">
    <Items>
        <dx:BootstrapListEditItem Text="WinForms" Value="WinForms" />
        <dx:BootstrapListEditItem Text="ASP.NET" Value="ASP.NET" Selected="true" />
        <dx:BootstrapListEditItem Text="ASP.NET MVC" Value="ASP.NET MVC" />
        <dx:BootstrapListEditItem Text="WPF" Value="WPF" />
    </Items>
</dx:BootstrapRadioButtonList>

Repeat Columns

The RepeatColumns property specifies the number of columns displayed within the Radio Button List editor.

<dx:BootstrapRadioButtonList runat="server" RepeatColumns="2">
    <Items>
        <dx:BootstrapListEditItem Text="WinForms" Value="WinForms" />
        <dx:BootstrapListEditItem Text="ASP.NET" Value="ASP.NET" Selected="true" />
        <dx:BootstrapListEditItem Text="ASP.NET MVC" Value="ASP.NET MVC" Selected="true" />
        <dx:BootstrapListEditItem Text="WPF" Value="WPF" />
    </Items>
</dx:BootstrapRadioButtonList>

Badges

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

  • Badge.Text - Specifies the text in the badge.
  • Badge.CssClass - Specifies the name of a CSS class applied to the badge element.
<dx:BootstrapRadioButtonList runat="server" Caption="Choose the test complexity:">
    <Items>
        <dx:BootstrapListEditItem Value="First level" Badge-Text="Beginner" />
        <dx:BootstrapListEditItem Value="Second level" Selected="true" Badge-Text="Intermediate" Badge-CssClass="bg-primary"/>
        <dx:BootstrapListEditItem Value="Third level" Badge-Text="Advanced" Badge-CssClass="bg-danger" />
    </Items>
</dx:BootstrapRadioButtonList>
Screen Size
Color Themes
Demo QR Code