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>
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>