Css – Bootstrap CSS for RadiobuttonList

asp.netcsstwitter-bootstrap

Radion button : 

   <div class="control-group">
    <label class="control-label">Mode</label>
    <div class="controls">
        <asp:radiobuttonlist id="RadioButtonList1" cssclass="radio" autopostback="true" title="Please Select Mode of Payment"
          repeatdirection="Horizontal"
          onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
            <asp:listitem>Cash</asp:listitem>
            <asp:listitem>Cheque</asp:listitem>
            <asp:listitem>Demand Draft</asp:listitem>
            <asp:listitem>Net Banking</asp:listitem>
        </asp:radiobuttonlist>
    </div>
   </div>

I have applied the Bootstrap css for:

  • text box,
  • dropdown list,
  • textarea,
  • buton, etc.

Everything looks fine, except for radiobutton list, which looks terrible:

enter image description here

How to solve this ?

Best Solution

I could not use a <label> and <input type="radio">

So this is what I used:

<asp:RadioButtonList ID="popiRadios" RepeatLayout="Flow" RepeatDirection="Horizontal" runat="server">
                        <asp:ListItem class="radio-inline" Value="1" Text="Cash" Selected="True"></asp:ListItem>
                        <asp:ListItem class="radio-inline" Value="0" Text="Cheque"></asp:ListItem>
                    </asp:RadioButtonList>

And it came out like this:

enter image description here

Related Question