asp.net - Bootstrap CSS for RadiobuttonList -

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 bootstrap css for:

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

everything looks fine, except radiobutton list, looks terrible:

how solve ?

i not use <label> , <input type="radio">

so 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 came out this: