Form Design With Bootstrap - Align Text Boxes And Text Areas

As shown in the image above, I want to move the textbox up to align with TextArea. Is there any Bootstrap class I can apply? I'm using boostrap 3.3.6 HTML

Solution 1:

This is what you want, a cleaner and responsive design. Your goal here is to have to col-md-6 columns, since you are splitting content into two columns:

Resize your browser and see result: https://jsfiddle.net/L4LtoLsz/

<divclass="panel-body"><formclass="form-horizontal"><divclass="col-md-6"><divclass="row top-buffer"><divclass="form-group"><labelfor="inputEmail1"class="col-sm-3 control-label">Quote Date:</label><divclass="col-sm-9"><inputtype="email"class="form-control"id="inputEmail1"placeholder="Quote Date"></div></div><divclass="form-group"><labelfor="inputEmail2"class="col-sm-3 control-label">Reseller</label><divclass="col-sm-9"><inputtype="email"class="form-control"id="inputEmail2"placeholder="Reseller"></div></div><divclass="form-group"><labelfor="inputEmail3"class="col-sm-3 control-label">Reseller Contact:</label><divclass="col-sm-9"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Reseller Contact"></div></div></div></div><divclass="col-md-6"><divclass="row top-buffer"><divclass="form-group"><labelfor="inputEmail5"class="col-sm-3 control-label">Quote Prepared By:</label><divclass="col-sm-9"><inputtype="email"class="form-control"id="inputEmail5"placeholder="Quote Prepared By"></div></div><divclass="form-group"><labelfor="tarea"class="col-sm-3 control-label">Notes:</label><divclass="col-sm-9"><textareaid="tarea"class="form-control"></textarea></div></div></div></div></form>

Share