Default Check Box

This example demonstrates the Bootstrap Check Box control with default settings. The Bootstrap Check Box is a check editor that indicates whether a specific condition is on or off. It is commonly used to introduce Yes/No or True/False selection to an end-user.

ASPXCopy 
<dx:BootstrapCheckBox runat="server" Text="CheckBox">
</dx:BootstrapCheckBox>

Grayed State

The Check Box below allows the third, "Intermediate", state.

  • AllowGrayed - specifies whether the Check Box allows three check states
  • AllowGrayedByClick - controls whether end-users are allowed to switch the editor to the indeterminate state or whether this can only be done programmatically
ASPXCopy 
<dx:BootstrapCheckBox runat="server" Text="CheckBox" AllowGrayed="true" CheckState="Indeterminate">
</dx:BootstrapCheckBox>

Badge

Badges contain supplementary information and can display an icon and/or text. Use the BootstrapCheckBox.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.
ASPXCopy 
<dx:BootstrapCheckBox runat="server" Text="CheckBox">
    <Badge Text="Badge" />
</dx:BootstrapCheckBox>
<dx:BootstrapCheckBox runat="server" Text="CheckBox">
    <Badge Text="Badge" CssClass="bg-primary"/>
</dx:BootstrapCheckBox>
<dx:BootstrapCheckBox runat="server" Text="CheckBox">
    <Badge Text="Badge" CssClass="bg-danger"/>
</dx:BootstrapCheckBox>
Screen Size
Color Themes
Demo QR Code