Getting numbers left of input radio buttons with Bootstrap when the screen size is small?

Babak Sekandari
Babak Sekandari used Ask the Experts™
on
I have a web application that uses Bootstrap and I'm trying to make it more mobile responsive.
There is an HTML page that I'm working on now that uses a list groups. That top list row has the labels of agree, disagree, etc, and the following list rows each have a question with some input radio buttons.
When the page is seen in a large screen, the radio buttons are aligned properly with the labels. When the screen becomes small, however, the radio buttons stack beneath the question. So, I added a class="hidden-lg" on a span with a number for each radio button so that when the page is smaller, people can see the radio buttons numbered. They don't need to be numbered when the page is large. However, I can't get the number to appear to the left of each radio button. The numbers keep appearing above the radio buttons. How do I get the span tag with the number to appear to the left of the radio button?
Here are some examples of what I've tried so far.
This example causes the radio buttons to appear under the question in a vertical column with the number above the radio button:
<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>7.</strong> Course assignments are relevant to the course.
        </div>
        <div style="display:block" class="col-lg-1 align">
            <span class="hidden-lg">1</span>
            <input  type='radio' name='q27' value="1" />
        </div>
        <div class="col-lg-1 align">
            <span  class="hidden-lg">2</span>
            <input  type='radio' name='q27' value="2" />
        </div>
        <div class="col-lg-1 align">
            <span  class="hidden-lg">3</span>
            <input  type='radio' name='q27' value="3" />
        </div>
        <div class="col-lg-1 align">
            <span class="hidden-lg">4</span>
            <input  type='radio' name='q27' value="4" />
        </div>
    </div>
</li>

Open in new window


This example causes the radio buttons to appear under the question in a horizontal row, but the numbers appear above the radio buttons instead of to the left:
<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>6.</strong>The syllabus clearly states how my final grade will be calculated.
        </div>
        <div class="col-xs-1 col-lg-1 align">
            <span class="hidden-lg" style="display:inline">1</span>
            <input style="display:inline" type='radio' name='q26' value="1" />
        </div>
        <div class="col-xs-1 col-lg-1 align">
            <span class="hidden-lg" style="display:inline" class="hidden-lg">2</span>
            <input style="display:inline" type='radio' name='q26' value="2" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span style="display:inline" class="hidden-lg">3</span>
            <input style="display:inline" type='radio' name='q26' value="3" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span style="display:inline" class="hidden-lg">4</span>
            <input style="display:inline" type='radio' name='q26' value="4" />
        </div>
    </div>
</li>

Open in new window

How do I get the number to appear to the left of the radio button?
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Mukesh YadavFull Stack Developer

Commented:
Can you please share the screenshot as well, it would be easy to understand the issue.
Babak SekandariProgrammer / Analyst

Author

Commented:
This shows the radio buttons stacked vertically below the question with the numbers above the radio button inputs.
This shows the radio buttons stacked belowthe question with the numbers above the radio buttons
<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>7.</strong> Course assignments are relevant to the course.
        </div>
        <div style="display:block" class="col-lg-1 align">
            <span class="hidden-lg">1</span>
            <input  type='radio' name='q27' value="1" />
        </div>
        <div class="col-lg-1 align">
            <span  class="hidden-lg">2</span>
            <input  type='radio' name='q27' value="2" />
        </div>
        <div class="col-lg-1 align">
            <span  class="hidden-lg">3</span>
            <input  type='radio' name='q27' value="3" />
        </div>
        <div class="col-lg-1 align">
            <span class="hidden-lg">4</span>
            <input  type='radio' name='q27' value="4" />
        </div>
    </div>
</li>

Open in new window

This shows the numbers above the radio buttons while the radio buttons are arranged horizontally below the question. After that is the code for it.
This shows the radio buttons set horizontally below the question with the numbers above the radio buttons.
<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>6.</strong>The syllabus clearly states how my final grade will be calculated.
        </div>
        <div class="col-xs-1 col-lg-1 align">
            <span class="hidden-lg" style="display:inline">1</span>
            <input style="display:inline" type='radio' name='q26' value="1" />
        </div>
        <div class="col-xs-1 col-lg-1 align">
            <span class="hidden-lg" style="display:inline" class="hidden-lg">2</span>
            <input style="display:inline" type='radio' name='q26' value="2" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span style="display:inline" class="hidden-lg">3</span>
            <input style="display:inline" type='radio' name='q26' value="3" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span style="display:inline" class="hidden-lg">4</span>
            <input style="display:inline" type='radio' name='q26' value="4" />
        </div>
    </div>
</li>

Open in new window

In both cases, the numbers appear above the inputs.
I want to know how to get the numbers to appear to the left of the inputs.
Hi,

Don't use inline css, when using custom CSS put them all on a custom.css file make sure it is after the Bootstrap CSS
so removed all
style="display:inline"

Open in new window

as they probably break the Bootstrap code

Note there is inline class https://getbootstrap.com/docs/4.3/components/forms/#inline-1

About vertical align you can use these helper https://getbootstrap.com/docs/4.3/utilities/vertical-align/
radio button doc https://getbootstrap.com/docs/4.3/components/forms/#radios
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Babak SekandariProgrammer / Analyst

Author

Commented:
The changes from getbootstrap.com don't seem to have made any difference:
<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>6.</strong>The syllabus clearly states how my final grade will be calculated.
        </div>
        <div class="col-xs-1 col-lg-1 align custom-control custom-radio custom-control-inline">
            <span class="hidden-lg">1</span>
            <input  type='radio' name='q26' value="1" class="custom-control-input"/>
        </div>
        <div class="col-xs-1 col-lg-1 align custom-control custom-radio custom-control-inline">
            <span class="hidden-lg">2</span>
            <input type='radio' name='q26' value="2" class="custom-control-input"/>
        </div>
        <div class="col-xs-1 col-lg-1 align custom-control custom-radio custom-control-inline">
            <span class="hidden-lg">3</span>
            <input type='radio' name='q26' value="3" class="custom-control-input"/>
        </div>
        <div class="col-xs-1 col-lg-1 align custom-control custom-radio custom-control-inline">
            <span class="hidden-lg">4</span>
            <input type='radio' name='q26' value="4" class="custom-control-input"/>
        </div>
    </div>
</li>

Open in new window

The appearance of the radio buttons and numbers appears the same.
Babak SekandariProgrammer / Analyst

Author

Commented:
This also failed:
   
<div class="row">
        <div class="col-lg-8">
            <strong>7.</strong> Course assignments are relevant to the course.
        </div>
        <div class="col-lg-1 align ">
            <label class="hidden-lg"> 1
                <input type='radio' name='q27' value="1" />
            </label>
        </div>
        <div class="col-lg-1 align ">
            <label class="hidden-lg"> 2
                <input type='radio' name='q27' value="2" />
            </label>
        </div>
        <div class="col-lg-1 align ">
            <label class="hidden-lg"> 3
                <input type='radio' name='q27' value="3" />
            </label>
        </div>
        <div class="col-lg-1 align ">
            <label class="hidden-lg"> 4
                <input type='radio' name='q27' value="4" />
            </label>
        </div>
    </div>
</li>

Open in new window

The numbers were visible horizontally when the screen size was extra small, but the input disappeared when the screen was large because the input was inside the label.
Question-7-input-in-label.PNG
Hi,

Radio come in two way stacked or inline
https://getbootstrap.com/docs/4.3/components/forms/#checkboxes-and-radios

You seems to want the inline version
You should put your main label inside label tag

<label> Course assignments <label>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>

Open in new window


Make sure you use the correct syntax for your column too always total of 12 per column size
for all grid option refer to this: https://getbootstrap.com/docs/4.3/layout/grid/

<div class="container">
  <div class="row">
    <div class="col-sm-12">

   then put your code here

    </div>    
  </div>
</div>

Open in new window


And please don't use any custom class during your tests that will simplify debugging.

If you are new to Bootstrap there are a lot of free courses on Udemy https://www.udemy.com/courses/search/?src=ukw&q=bootstrap%204&p=1&price=price-free
Babak SekandariProgrammer / Analyst

Author

Commented:
That didn't change the appearance. This was my code:
<li class="list-group-item">
    <div class="row">
        <div class="col-xs-8 col-lg-8">
            <strong>4.</strong> The course is well organized.
        </div>
        <div class="form-check form-check-inline col-xs-1  col-lg-1 align">
            <label for="1q24" class="form-check-label hidden-lg hidden-md"> 1 </label>
            <input type='radio' name='q24' id="1q24" value="1" class="form-check-input"/>
        </div>
        <div class="form-check form-check-inline col-xs-1  col-lg-1 align">
            <label for="2q24" class="form-check-input hidden-lg hidden-md"> 2 </label>
            <input type='radio' name='q24' id="2q24" value="2" class="form-check-input"/>
        </div>
        <div class="form-check form-check-inline col-xs-1  col-lg-1 align">
            <label for="3q24" class="form-check-input hidden-lg hidden-md"> 3 </label>
            <input type='radio' name='q24' id="3q24" value="3" class="form-check-input"/>
        </div>
        <div class="form-check form-check-inline col-xs-1  col-lg-1 align">
            <label for="4q24" class="form-check-input hidden-lg hidden-md"> 4 </label>
            <input type='radio' name='q24' id="4q24" value="4" class="form-check-input"/>
        </div>
    </div>
</li>

Open in new window


I figured that maybe since that's 4.3 bootstrap and I have version 3, I should try this:
<li class="list-group-item">
    <div class="row">
        <div class="col-xs-8 col-lg-8">
            <strong>4.</strong> The course is well organized.
        </div>
        <div class="radio col-xs-1  col-lg-1 align">
            <label for="1q24" class="hidden-lg hidden-md"> 1 </label>
            <input type='radio' name='q24' id="1q24" value="1" />
        </div>
        <div class="radio col-xs-1  col-lg-1 align">
            <label for="2q24" class="hidden-lg hidden-md"> 2 </label>
            <input type='radio' name='q24' id="2q24" value="2" />
        </div>
        <div class="radio col-xs-1  col-lg-1 align">
            <label for="3q24" class="hidden-lg hidden-md"> 3 </label>
            <input type='radio' name='q24' id="3q24" value="3" />
        </div>
        <div class="radio col-xs-1  col-lg-1 align">
            <label for="4q24" class="hidden-lg hidden-md"> 4 </label>
            <input type='radio' name='q24' id="4q24" value="4" />
        </div>
    </div>
</li>

Open in new window


But that made it appear like this: question-4.PNG
Hi,

Remove
<li class="list-group-item">

Open in new window

this will break the code.
Remove all hidden-lg hidden-md class and remove the column in your radio class

here is the example for Bootstrap 3  radio and checkbox
don't use any other code or any  custom class
https://getbootstrap.com/docs/3.3/css/#checkboxes-and-radios
https://getbootstrap.com/docs/3.3/css/#inline-checkboxes-and-radios

<div class="container">
  <div class="row">
    <div class="col-sm-12">

        <label class="radio-inline">
             <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        </label>
      <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
      </label>
 
     <div class="radio">
         <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
             some text here
         </label>
     </div>
       <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
               some text here
           </label>
     </div>
  
    </div>    
  </div>
</div>

Open in new window


Bootstrap 3 is very different from Bootstrap 4  so it required a lot of modification, if you are starting a new application then use Bootstrap 4 if you are working on an existing app that use Bootstrap 3 I would continue with that for now then update later when you have the time.
https://getbootstrap.com/docs/4.0/migration/

and refer to my previous answer fo Bootstrap 4
https://www.experts-exchange.com/questions/29150309/Getting-numbers-left-of-input-radio-buttons-with-Bootstrap-when-the-screen-size-is-small.html#a42896590

Resize the browser manually and see how it display the result you will not need to hide the field on other size as it will render ok on smaller size this is what is great about Bootstrap. Just decide if you need the inline or stacked version

For now try to use the Bootstrap element using the documentation code, later when you will be more experienced with the syntax you will be able to customize it.
Babak SekandariProgrammer / Analyst

Author

Commented:
re: "Remove all hidden-lg hidden-md class and remove the column in your radio class"
That defeats the purpose of what we're trying to do. We only want the numbers to appear when the screen size is small.

re: "Resize the browser manually and see how it display the result you will not need to hide the field on other size as it will render ok on smaller size..."
When looking at the display on a small screen without any modifications the radio buttons appear stacked on top of each other. We wanted to avoid that.
The requirements were to hide the labels on larger screen sizes.
Hi,

The thing is if the result is no good from the start it won't be good when you add all other classes.

You can try to use the group class from v3.2.0  
https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

You can use something like this (you can replace xs per lg depend of the case)

 .visible-xs-inline-block

Open in new window

or
.visible-xs-inline

Open in new window


to replaced your code
hidden-lg hidden-md

Open in new window

Babak SekandariProgrammer / Analyst

Author

Commented:
What happened is as follows.
The labels became visible in the large screen sizes (that's what we wanted to avoid). Here's an image:
Question4-Large-Screen.PNGThe labels were on top of the radio buttons at small screen sizes (also what we wanted to avoid). Here's an image:
Question4-Small-Screen.PNGHere is some sample code. I tried several variations of the code below:
<li class="list-group-item">
    <div class="row">
        <div class="col-xs-8 col-lg-8">
            <strong>4.</strong> The course is well organized.
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span class="visible-xs-inline "> 1 </span><input type='radio' name='q24' value="1" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span class="visible-xs-inline "> 2 </span><input type='radio' name='q24' value="2" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span class="visible-xs-inline "> 3 </span><input type='radio' name='q24' value="3" />
        </div>
        <div class="col-xs-1  col-lg-1 align">
            <span class="visible-xs-inline "> 4 </span><input type='radio' name='q24' value="4" />
        </div>
    </div>
</li>

Open in new window

Hi

using radio-inline class will have a better result

Here is the easiest way to do it
https://jsfiddle.net/lenamtl/kouwdc61/

this one is using the col
https://jsfiddle.net/lenamtl/5240r7v3/

there are other way but this is the simple one

By using label element and using radio-inline this help to set the label place

if you want the label at the right it not perfect but you can adjust with css
https://jsfiddle.net/lenamtl/d51whumx/
Babak SekandariProgrammer / Analyst

Author

Commented:
I tried some variations. The first image is from a large screen and the second image is in an extra small screen:
large screenextra small screenHere is the code that matches the above two images:
<li class="list-group-item">
    <div class="row">
        <div class="col-sm-12">
            <label>
                <strong>1.</strong> The course is well organized 1.
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 1 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 2 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 3 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 4 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            </label>
        </div>
    </div>
</li>

<li class="list-group-item">
    <div class="row">
        <div class="col-xs-4 col-lg-8">
            <label>
                <strong>2.</strong> The course is well organized 2.
            </label>
        </div>
        <div class="col-xs-8 col-lg-4 align">
            <label class="radio-inline">
                <span class="hidden-lg"> 1 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 2 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 3 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 4 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            </label>
        </div>
    </div>
</li>

<li class="list-group-item">
    <div class="row">
        <div class="col-lg-12">
            <label>
                <strong>3.</strong> The course is well organized 3.
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 1 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 2 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 3 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            </label>
            <label class="radio-inline">
                <span class="hidden-lg"> 4 </span>
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            </label>
        </div>
    </div>
</li>

<li class="list-group-item">
    <div class="row">
        <div class="col-lg-8">
            <strong>4.</strong> The course is well organized.
        </div>
        <div class="col-lg-1 align">
            <span class="hidden-lg hidden-md"> Strongly Disagree</span><input type='radio' name='q24' value="1" />
        </div>
        <div class="col-lg-1 align">
            <span class="hidden-lg hidden-md"> Disagree </span><input type='radio' name='q24' value="2" />
        </div>
        <div class="col-lg-1 align">
            <span class="hidden-lg hidden-md"> Agree </span><input type='radio' name='q24' value="3" />
        </div>
        <div class="col-lg-1 align">
            <span class="hidden-lg hidden-md"> Strongly Agree </span><input type='radio' name='q24' value="4" />
        </div>
    </div>
</li>

Open in new window

The second row matches most closely to what we need in both images. All we need to do is to get the radio buttons to align with the questions for large screens like the fourth row aligns. We also need to get the numbers to align to the radio buttons in the small screen.
Hi,

the class you are using for the form can also make a difference
<form class="form-inline">
<form class="form-horizontal">
<form >

Open in new window


Bootstrap doc about form class
https://getbootstrap.com/docs/3.3/css/#forms
Babak SekandariProgrammer / Analyst

Author

Commented:
I tried that and some other things including hiding entire rows:
            <li class="list-group-item">
                <div class="row hidden-xs hidden-sm">
                    <div class="col-xs-8 col-lg-8">
                        <strong>5.</strong> The instructions for completing the course assignments are clear.
                    </div>
                    <div class="col-lg-1 align "><input type='radio' name='q25' value="1" /></div>
                    <div class="col-lg-1 align "><input type='radio' name='q25' value="2" /></div>
                    <div class="col-lg-1 align "><input type='radio' name='q25' value="3" /></div>
                    <div class="col-lg-1 align "><input type='radio' name='q25' value="4" /></div>
                </div>
                <div class="row hidden-lg hidden-md">
                    <div class="col-xs-12 col-md-12">
                        <strong>5.</strong>The syllabus clearly states how my final grade will be calculated.
                    </div>
                </div>
                <div class="row hidden-lg hidden-md">
                    <div class="">                  
                        <label class="radio-inline col-xs-3 col-sm-3">
                            <span class="hidden-lg"> 1 </span>
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                        </label>
                        <label class="radio-inline col-xs-3 col-sm-3">
                            <span class="hidden-lg"> 2 </span>
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                        </label>
                        <label class="radio-inline col-xs-3 col-sm-3">
                            <span class="hidden-lg"> 3 </span>
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                        </label>
                        <label class="radio-inline col-xs-3 col-sm-3">
                            <span class="hidden-lg"> 4 </span>
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                        </label>
                    </div>
                </div>
            </li>

Open in new window

The numbers still appear to the upper right of the radio buttons.
Hi,

Just change the label before the input to get the label before the radio

The label is after
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>

Open in new window


the label is before
<div class="form-check form-check-inline">
 <label class="form-check-label" for="inlineRadio1">1</label>
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 
</div>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial