Bootstrap Align inputs and label for different columns size

Question

I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem.

I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one. As you can see textareas is not aligned with the others inputs:

How can I fix it?

DEMO

PS. I use Bootstrap 4, but, I think this question is related to Bootsrap 3 too.

.full-width {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 <form novalidate>
   <div class="row">
      <div class="col-md-8">
         <div class="form-group row">
            <label for="field1" class="col-md-2 col-form-label">Text Area</label>
            <div class="col-md-10">
               <textarea id="field1" class="form-control"
                  cols="30" rows="4"></textarea>
            </div>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group row">
            <div class="col-md-12">
               <div class="form-check">
                  <label class="form-check-label">
                  <input class="form-check-input" type="checkbox"> Checkbox 1
                  </label>
               </div>
               <div class="form-check">
                  <label class="form-check-label">
                  <input class="form-check-input" type="checkbox"> Checkbox 2
                  </label>
               </div>
               <div class="form-check">
                  <label class="form-check-label">
                  <input class="form-check-input" type="checkbox"> Checkbox 3
                  </label>
               </div>
            </div>
         </div>
      </div>
   </div>
   
   <div class="row">
   <div class="col-md-8">
      <div class="form-group row">
         <label for="field2" class="col-md-2 col-form-label">Input</label>
         <div class="col-md-10">
            <input id="field2" class="form-control"/>
         </div>
      </div>
   </div>
  </div>
   <div class="row">
<div class="col-md-12">
   <div class="form-group row">
      <label class="col-md-1 col-form-label">Options</label>
      <div class="col-md-11">
         <div class="row">
            <div class="col-md-6">
               <span>Label 1</span>
               <input type="radio" name="group1" value="Value 1"> Value 1
               <input type="radio" name="group1" value="Value 1"> Value 2
            </div>
            <div class="col-md-6">
               <span>Label 2</span>
               <input type="radio" name="group2" value="Value 1"> Value 1
               <input type="radio" name="group2" value="Value 2"> Value 2
            </div>
         </div>
         <div class="row">
            <div class="col-md-12">
               <div class="row">
                  <div class="col-md-11">
                     <textarea class="full-width"></textarea>
                  </div>
                  <div class="col-md-1">
                     <span">Icon</span>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-11">
                     <textarea class="full-width"></textarea>
                  </div>
                  <div class="col-md-1">
                     <span">Icon</span>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div>
</form>

score 1 · Answer 1 · answered Mar 23 '17 at 12:06

1

The problem is the first 2 rows are nested in col-md-8, and the misaligned "options" row is nested in col-md-12.

Also, clean up the various malformed HTML in the code.

http://www.codeply.com/go/sCYzgdFXxa

answered Mar 23 '17 at 12:06

Carol Skelly

351,302
90
710
624

I believe you didn't understand the problem correctly. The `options` section must be `md-12` to have full width. – user348173 Mar 24 '17 at 03:46
I think you'll need to make some adjustments to the col widths. The issue with alignment was answered. – Carol Skelly Mar 24 '17 at 11:24
In the question you can find ` some rows use full witdh`, so you answer solve one problem, but creates another one. Anyway, thanks for the answer. – user348173 Mar 25 '17 at 11:03
I know it says "some rows use full width" so you'll need to adjust the width of those by using a different col size. You can't have more that 12 units in a single line accross the viewport. – Carol Skelly Mar 28 '17 at 01:15

Bootstrap Align inputs and label for different columns size

1 Answers1