Radio buttons with bootstrap in ASP.Net

Question

im using visual studio 2012 with bootstrap downloaded from nuget package.

i have the below code to display radio buttons

<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
        <asp:RadioButtonList ID="RadioButtonList3" runat="server" CssClass="radio">
            <asp:ListItem Text="Yes" Value="yes"></asp:ListItem>
            <asp:ListItem Text="No" Value="no"></asp:ListItem>
        </asp:RadioButtonList>

now the alignment is not proper, its like

how can i get to to properly align using bootstrap and asp.net as below

Answer 1

I actually found another way, and works fine using row-fluid property of bootstrap

<div class="row-fluid">
            <div class="span6 offset3">
                fluid6
                <div class="row-fluid">
                    <div class="span6">
                        <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                    </div>
                    <div class="span6 radio">
                        <asp:RadioButtonList ID="RadioButtonList3" runat="server">
                        <asp:ListItem Text="Yes" Value="yes"></asp:ListItem>
                        <asp:ListItem Text="No" Value="no"></asp:ListItem>
            </asp:RadioButtonList>
                    </div>
                </div>

            </div>
        </div>

Answer 2

You're going to need to use a little CSS.

Try setting the labels to:

#RadioButtonList3 label{
    display: inline-block;
    width: 200px; <---- wild shot in the dark on the exact width
    text-align: center;
}