Bootable 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 applied Bootstrap css for:

• text field,
• drop-down list,
• TextArea,
• bud, etc.

Everything looks great, except for a list of radio objects that looks awful:

How to solve this?

Answer 1

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

So here 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 turned out like this:

Answer 2

Demo

Add the ' radio inline ' class to the ' label '

HTML

 <form> <div class="form-inline"> <div class="controls-row"> <label class="control-label">Mode</label> <label class="radio inline"> <input type="radio" value="1" />First</label> <label class="radio inline"> <input type="radio" value="2" />Second</label> <label class="radio inline"> <input type="radio" value="1" />Third</label> <label class="radio inline"> <input type="radio" value="2" />Fourth</label> <label class="radio inline"> <input type="radio" value="1" />Fifth</label> <label class="radio inline"> <input type="radio" value="2" />Sixth</label> </div> </div> </form> 

Answer 3

There are many options you can choose, but I feel that the best thing in my experience is below.

• First set the style at the top of the form as shown below.

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

• Secondly, you have to apply clss to the ASP.NET RadioButtonList control