htmlbootstrap-4

Vertically align two columns input fields one with labels and other without label


I am making an application form for invoices. Now I made five columns in one row. Each column has input fields. The fourth and fifth column have four input fields but fifth column fields have no labels. Now what I need is to align both four column and fifth column using bootstrap classes without any custom CSS. Because I need no labels in fifth columns. After spending hours I can't figure out how to align both columns.

Html:

      <div class="row">
               <div class="col-sm-3>
                 <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control" id="" 
                     placeholder=""> </div>     
               </div>
               <div class="col-sm-3>
               <!--i am using these four lines code in every col for input fields for sake clarity i wrote it only here.
                  <div class="form-group"> 
                  <label for="inputEmail">field</label> 
                  <input type="text" class="form-control"id="" 
                     placeholder="item desc"> </div>     
               </div>
               <div class="col-sm-3>
                
               </div>
               <!---fourth col-!>
               <div class="col-sm-3>
               </div>
               <!--fifth col--!>
               <div class="col-sm-3>
               <!-I need to align this column with the above column remember this column field does not have labels that's why I am not able to align both columns(fourth and fifth)-!>
               </div>

            </div>


Solution

  • First of all, I don't know how you can make 5 columns in a row with col-sm-3. That will only make 4 columns in a row and the fifth column is pushed to a new row.

    If your 4th and 5th column both have 4 inputs, but only 5th column inputs don't have labels. Why not combine the 4th and 5th column into one column and use rows for their inputs?

    <div class="container">
      <div class="row">
        <div class="col-sm-2 offset-sm-1">
          <div class="form-group">
            <label>Field</label>
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-sm-2">
          <div class="form-group">
            <label>Field</label>
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-sm-2">
          <div class="form-group">
            <label>Field</label>
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label>Field 1</label>
            <div class="row">
              <div class="col-sm-6">
                <input type="text" class="form-control" />
              </div>
              <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="input 1 without label" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>Field 2</label>
            <div class="row">
              <div class="col-sm-6">
                <input type="text" class="form-control" />
              </div>
              <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="input 2 without label" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>Field 2</label>
            <div class="row">
              <div class="col-sm-6">
                <input type="text" class="form-control" />
              </div>
              <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="input 3 without label" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>Field 2</label>
            <div class="row">
              <div class="col-sm-6">
                <input type="text" class="form-control" />
              </div>
              <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="input 4 without label" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    

    enter image description here

    Fiddle: https://jsfiddle.net/aq9Laaew/91237/