Bootstrap CSS for RadiobuttonList

Question

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:

How to solve this ?

Answer 1

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:

Answer 2

There are plenty of option you can choose, but i feel the best is in my experience is below.

1. First set style in the top of your form as shown below

   <style>
       .radiostyle {
         height: auto;
       }
   
       .radiostyle label {
           margin-left: 3px !important;
           margin-right: 10px !important;
       }
   </style>
   

2. Second you should apply the clss to the ASP.NET RadioButtonList control