Bootstrap radio-inline line wrapping and stacked radio buttons

Question

Goal

I have a dynamic number of radio buttons. I want them to appear inline and drop down to the next row when needed. Depending on the screen size, I want them to stack.

Current Problem

Right now, I'm using:

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button's label 1
</label>

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button's label 2
</label>

...

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX">
    Radio button's label X
</label>

Those radio buttons as I said before are dynamic and there can be any number of them. They currently show up inline. But, when there are too many to fit on one row (even on a large monitor), they drop down and there is a margin-left: 10px associated with .radio-inline. So, the first radio button in rows 2, 3, 4, etc are 10px to the left of the first radio button in row 1. This is very noticeable when the screen is shrunk and all of the radio buttons are stacked. Again, row 1 is on the left, but every following row below it is pushed 10px to the right.

What I've Tried

I tried putting them in col-lg-#. As far as stacking goes, this works, but it causes word wrap on the radio button's labels.

Cadaver

Answer 1

I think it will be:

.radio-inline+.radio-inline {
    margin-left: 0;
}

.radio-inline {
    margin-right: 10px;
}

http://jsfiddle.net/rm7n73ep/

Chao

Answer 2

Best bet is to use the grid system.

 <div class="row">
   <div class="col-md-">
     <label class="radio-inline">
       <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX">
         Radio button's label X
       </label>
   </div>
 </div>

That way every time you add one it will go to the max of 12 and then float it to the next line. SO if it wraps as you say then you can change the number to a slightly bigger size.

Poop

Answer 3

Solution 1

Use JS to loop through each radio button in the group, getBoundingClientRect() on each, and the first one to have a different bottom than the previous, remove its margin-left. My issue with this is that it would have to be done on screen resize. I'm not a fan.

Solution 2

Quick and easy, add margin-left: 10px to the first radio-inline button using my own CSS class (not hacking Bootstrap). Downside, this adds an indentation to your group of radio buttons. Upside, this is a quick easy fix, no hacking, use CSS over JS, and the indentation actually looks nice.

Solution 2 - Sidenote

If you don't mind hacking Bootstrap a tad, put this in your CSS file that is added after Bootstrap's.

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

This makes the radio buttons immediately stack when on a smaller screen instead of floating beside each other. I noticed in some instances on a smaller screen, the first four radio buttons were stacked, but then two with less text were placed on the same line.

Cadaver

Answer 4

I got the similar issue.

try this:

<label class="radio-inline" ***style="margin-left: 0px;"***>
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button's label 1 </label>

<label class="radio-inline" ***style="margin-left: 0px;"***>
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button's label 2 </label>

...

you should be all right!

Epidiascope

Answer 5

BIG Inline Bootstrap 3 Radio Buttons

CSS

.radioButtonBig {
 transform: scale(1.7); 
}

HTML (using Bootstrap 3)

               <div class="form-group">
                    <div class="form-group">
                        <label for="">3. Question three is all about inserting radio buttons:</label>
                        <p class="radio-inline"></p>
                        <label class="radio-inline">
                            <input class="radioButtonBig" type="radio" name="rbg6" value="yes" onclick="rbShowSection(this, 'q3text');">
                            &nbsp;Yes
                        </label>
                        <p class="radio-inline"></p>
                        <label class="radio-inline">
                            <input class="radioButtonBig" type="radio" name="rbg6" value="no" onclick="rbShowSection(this, 'q3text');">
                            &nbsp;No
                        </label>
                    </div>
                </div>

Note: blank p tags just create spaces between - but super necessary. A bit manual but as required.

Energetic