CODEWITHSUNDEEP
cssasp.netbootstrap-4
Csharpnoob
Csharpnoob

Reputation: 41

Bootstrap - Vertical Radio Buttons not aligned

Im having a problem stacking radio buttons once the screen size reaches a certain size (in this case, 768px for mobile phones). I have this local @media override that takes the radio-inline and displays it as a block - however, once I do this, the first Radio Button "0", is slightly offset and does not align with the rest below it. Any thoughts on a work around or if im doing something wrong?

 <style>
@media  (max-width: 768px){ 
      .radio-inline{
      display:block;
      }
}

</style>  

<div class="container-fluid">
  <div class="jumbotron">
    <div>
        <asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE 
        TEXT"/>
        <br />
        <br />
        <asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
    </div>
    <div class="row" style="padding-bottom: 30px;">
        <div class="col-lg-12">
            <label class="radio-inline">
             <input type="radio" name="A1" value="0" required> <b>0&nbsp 
               &nbsp</b>
            </label>
            <label class="radio-inline">
            <input type="radio" name="A1" value="1" required> <b>1&nbsp 
              &nbsp</b>
            </label>
            <label class="radio-inline">
            <input type="radio" name="A1" value="2" required> 
               <b>2&nbsp &nbsp</b>
            </label>
      </div>
  </div>
</div>

Upvotes: 0

Views: 1464

Answers (1)

user3361996
user3361996

Reputation: 373

You need to remove the spaces, "&nbsp", from each input. This should fix the issue as shown in this code snippet. If you need spacing, use CSS.

https://jsfiddle.net/tbuchanan/Lqj412tu/

    <label class="radio-inline">
         <input type="radio" name="A1" value="0" required> <b>0</b>
    </label>

Upvotes: 1

Related Questions