Twitter Bootstrap Question posted in

Using Twitter Bootstrap to line up radio button answers

With Twitter Bootstrap 3.3.7, I am trying to line up multiple questions that have inline radio button answers and have the radio buttons for all questions line up to be displayed nicer for end users.

If this is on a Extra small device, I want the radio buttons to be on the next line.

The trouble I am having is that applying col-sm-6 (or any column size) seems to not work as I expect. The help-block doesn’t fully go to the next line, it’s stuck under the radio buttons.

I’m looking to be able to use proper Twitter Bootstrap form syntax. Is this possible with the form syntax, or does this require doing it with their own rows/cols?

An example of a question: JSFiddle https://jsfiddle.net/y8j5f0of/

<div class="row">
    <div class="form-group">
        <label class="col-sm-6">This is an example question</label>
        <div class="col-sm-6">
            <label class="radio-inline">
                <input type="radio" name="answer1" value="Yes"> Yes
            </label>
            <label class="radio-inline">
                <input type="radio" name="answer1" value="No"> No
            </label>
        </div>
        <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span>
    </div>
</div>

Answers are lined up, but the output isn’t flowing properly.

enter image description here

If I remove the col-sm-6, everything flows as expected but the answers aren’t lined up. Also, this doesn’t allow the radio buttons to go to their own line for Extra small device.

JSFiddle https://jsfiddle.net/nz36k74o/1/

<div class="row">
    <div class="form-group">
        <label>This is an example question 1 that is longer than question 2</label>
        <label class="radio-inline">
            <input type="radio" name="answer1" value="Yes"> Yes
        </label>
        <label class="radio-inline">
            <input type="radio" name="answer1" value="No"> No
        </label>
        <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span>
    </div>
</div>

Output

enter image description here

Tags:

2

Answers


  1. 0

    The help block should really be in a new row. If it is supposed to be underneath the other content, then its not part of the row. That’s the basis of the Bootstrap grid system. A basic question block should look like this:

    <div class="form-group">
    <div class="row">
      <label class="col-sm-6">This is an example question 1 that is longer than question 2</label>
      <div class="col-sm-6">
         <label class="radio-inline">
             <input type="radio" name="answer1" value="Yes"> Yes
         </label>
         <label class="radio-inline">
             <input type="radio" name="answer1" value="No"> No
         </label>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
          <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span> 
      </div>            
  </div>
</div>

    Check out the fiddle (sorry onlyhad time to do one)

    Login or Signup to reply.
  2. 0

    Here is one solution to align the question correctly. It adds in some extra html tags but I believe it solves your issue.

    This is the updated fiddle.
    https://jsfiddle.net/nz36k74o/3/

    <div class="form-group">
  <label class="col-sm-6">This is an example question</label>

  <div class="col-sm-6">
    <label class="radio-inline">
      <input type="radio" name="answer1" value="Yes"> Yes
    </label>

    <label class="radio-inline">
      <input type="radio" name="answer1" value="No"> No
    </label>
   </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <span class="help-block">This is an example help block.</span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search