Make asp.net radiobuttonlist appear as bootstrap button group

Question

I have a settings page that allows user's to toggle certain alerts on and off. These on and off switches are of a RadioButtonListcontrol. I have not had any luck trying to use bootstrap classes or custom classes to get the affect I want.

Essentially I have this:

But I would like it to resemble something like this:

If any of you have had success styling asp.net RadioButtonList in such a way I would appreciate your help!

EDIT

I have attempted forcing classes on the list items themselves

<div class="btn-group">
    <asp:RadioButtonList ID="Rbl_MinBal" runat="server" RepeatDirection="Horizontal">
          <asp:ListItem Text="On" Value="0" class="btn btn-default" />
          <asp:ListItem Text="Off" Value="1" class="btn btn-default" />
    </asp:RadioButtonList>
</div>

Not Ideal:

Solution 1

use below code to get same result

    <div id="radio-group" class="btn-group" data-toggle="buttons">
        <asp:RadioButton GroupName="myGroup" ID="RadioButton1" runat="server" Checked="True"  CssClass="btn btn-default" Text="On" />
        <asp:RadioButton GroupName="myGroup" ID="RadioButton2" runat="server" CssClass="btn btn-default" Text="Off" />
    </div>

CSS

#radio-group label {
    margin: 0;
}

JQuery

$("#radio-group :radio").each(function () {
    if ($(this).is(':checked')) {
        $(this).parent().addClass("active");
    }
});

Solution 2

I was able to render it properly by setting the css and the data-toggle at the right place.

<asp:RadioButtonList ID="test" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
   <asp:ListItem class="btn btn-default">Item 1</asp:ListItem>
   <asp:ListItem class="btn btn-default">Item 2</asp:ListItem>
   <asp:ListItem class="btn btn-default">Item 3</asp:ListItem>
   <asp:ListItem class="btn btn-default">Item 4</asp:ListItem>
</asp:RadioButtonList>

Comments

[clamchoda]

Good solution, although if we're using AutoPostback this will break that functionality. To fix manually raise the on change event. onchange="BootstrapRadioButtonPostback(this);" like so function BootstrapRadioButtonPostback(elm) { __doPostBack(elm.id, "");}