[SOLVED] How do I add a space between a RadioButtonList's radio buttons and their text?

Issue

I have been reading about some workaround but haven’t found anything that works for me. I’m using Bootstrap in my ASPX page to display a RadioButtonList with "Yes" and "No" options like so:

<div class="form-group my-3">
    <label class="form-label" style="margin-top: 0px; margin-right: 15px; margin-bottom: 0px;">I worked in person:</label>
    <asp:RadioButtonList runat="server" ID="input_inPerson">
        <asp:ListItem Selected="False" Value="true">Yes</asp:ListItem>
        <asp:ListItem Selected="False" Value="false">No</asp:ListItem>
    </asp:RadioButtonList>
</div>

The button and text are not spaced at all, as shown here:

Poorly spaced button and text

My question is, are there any ways to add a space between this button and the text? If so, can I use bootstrap’s "m" classes to do it?

Solution

Just toss in a style, as the "label" part of the radio buttons are rendered as a simple "label"

So, try this:

        <style>
            .butLabel label {margin-left:15px} 
        </style>

    <div class="form-group my-3">
        <label class="form-label" style="margin-top: 0px; margin-right: 15px; margin-bottom: 0px;">I worked in person:</label>
        <asp:RadioButtonList runat="server" ID="input_inPerson" CssClass="butLabel">
            <asp:ListItem Selected="False" Value="true">Yes</asp:ListItem>
            <asp:ListItem Selected="False" Value="false">No</asp:ListItem>
        </asp:RadioButtonList>
    </div>

So, with say 15px, you get this:

enter image description here

Answered By – Albert D. Kallal

Answer Checked By – Mildred Charles (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *