Reputation: 12709
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
<div class="panel-body">
<div class="col-md-12 col-sm-12">
<div class="row top-buffer">
<div class="col-md-2">
Quote Date:
</div>
<div class="col-md-2">
<asp:TextBox ID="txtReference" class="form-control" runat="server" ></asp:TextBox>
</div>
<div class="col-md-2">
Quote Prepared By:
</div>
<div class="col-md-2">
<asp:TextBox ID="txtCountry" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-2">
Reseller:
</div>
<div class="col-md-2">
<asp:TextBox ID="TextBox1" class="form-control" runat="server" ></asp:TextBox>
</div>
<div class="col-md-2">
Notes:
</div>
<div class="col-md-2">
<asp:TextBox ID="TextBox2" class="form-control" runat="server" TextMode="MultiLine" Height="252px" Width="414px"></asp:TextBox>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-2">
Reseller Contact:
</div>
<div class="col-md-2">
<asp:TextBox ID="TextBox3" class="form-control" runat="server" ></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
Upvotes: 0
Views: 664
Reputation: 1612
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/
<div class="panel-body">
<form class="form-horizontal">
<div class="col-md-6">
<div class="row top-buffer">
<div class="form-group">
<label for="inputEmail1" class="col-sm-3 control-label">Quote Date:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail1" placeholder="Quote Date">
</div>
</div>
<div class="form-group">
<label for="inputEmail2" class="col-sm-3 control-label">Reseller</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail2" placeholder="Reseller">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Reseller Contact:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Reseller Contact">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row top-buffer">
<div class="form-group">
<label for="inputEmail5" class="col-sm-3 control-label">Quote Prepared By:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail5" placeholder="Quote Prepared By">
</div>
</div>
<div class="form-group">
<label for="tarea" class="col-sm-3 control-label">Notes:</label>
<div class="col-sm-9">
<textarea id="tarea" class="form-control"></textarea>
</div>
</div>
</div>
</div>
</form>
Upvotes: 1