Having issues on aligning labels properly
Question
I am having an issue with aligning 2 labels, here is a screen shot of the image as it is right now, look at the Quantity and UOM labels
as you can see the Quantity and UOM is to far from the Purchase column, I need to get those two labels closer so it would look like this
As you can see I need the Quantity and UOM labels closer as in the pic. I have tried using a style of text align right and that didn't work.
How can I move the two labels more to the right?
Here is the complete code
<body>
<div style="width:830px; margin-left:50px;">
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#MaterialData" data-toggle="tab">Material Data</a></li>
<li><a href="#MaterialColorAssignment" data-toggle="tab">Material Color Assignment</a></li>
<li><a href="#MaterialVendorAssignment" data-toggle="tab">Material Vendor Assignment</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="MaterialData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Material</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<input id="Category" class="form-control max-size" name="Category" required validationMessage="Select Category" />
<span class="k-invalid-msg" data-for="Category"></span>
</div>
<div class="col-md-4">
<input id="Type" class="form-control max-size" name="type" required validationMessage="Select type." />
<span class="k-invalid-msg" data-for="type"></span>
</div>
<div class="col-md-4" id="myDropdown">
<select class="form-control" name="subtype" id="SubType"></select>
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Material Information</strong></div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label>
<div class="col-md-2">
<input id="txtWidth" type="text" class="form-control" name="width" required validationMessage="Please add width." />
@*<span class="k-invalid-msg" data-for="width"></span>*@
</div>
<label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label>
<div class="col-md-2">
<input id="txtLength" type="text" class="form-control" name="length" required validationMessage="Please add length." />
@*<span class="k-invalid-msg" data-for="length"></span>*@
</div>
<label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label>
<div class="col-md-2">
<input id="txtSize" type="text" class="form-control" name="size" required validationMessage="Please add size." />
@*<span class="k-invalid-msg" data-for="size"></span>*@
</div>
</div>
</div>
</div>
<div class="panel panel-heading"><strong>Pricing and Labor Cost</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="row">
<label for="txtRemodel" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label>
<label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtRemodel12" class="control-label col-md-2" id="lblRemodel">Remodel</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtRemodel" type="text" class="form-control" name="remodel" required validationMessage="Please add sell prize." />
<span class="k-invalid-msg" data-for="remodel"></span>
</div>
<div class="col-md-4">
<input id="txtRemodel2" type="text" class="form-control" name="remodel2" required validationMessage="Please add labor cost." />
<span class="k-invalid-msg" data-for="remodel2"></span>
</div>
</div> <!-- end row -->
</div>
<div class="col-md-6">
<div class="row">
<label for="txtPurchaseQuantity" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label>
<label for="txtSellQuantity" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label>
</div><!-- end row -->
<br />
<div class="row">
<label for="txtQuantity" class="control-label col-md-2" id="lblQuantity">Quantity</label>
<div class="col-md-4 col-md-offset-2">
<input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" required validationMessage="Please add purchase qty." />
<span class="k-invalid-msg" data-for="purchasequantity"></span>
</div>
<div class="col-md-4">
<input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" required validationMessage="Please add sell qty." />
<span class="k-invalid-msg" data-for="sellquantity"></span>
</div>
</div> <!-- end row -->
<div class="row row-splitter">
<label for="txtUOM" class="control-label col-md-2" id="lblUOM">U.O.M</label>
<div class="col-md-1 col-md-offset-2">
<select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;" required validationMessage="Select purchase U.O.M."></select>
<span class="k-invalid-msg" data-for="buyuom"></span>
</div>
<div class="col-md-1 col-md-offset-3">
<select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;" required validationMessage="Select sell U.O.M."></select>
<span class="k-invalid-msg" data-for="selluom"></span>
</div>
</div> <!-- end row -->
</div>
</div>
</div>
</div>
</div><!--End Material Data-->
</div><!--End tab content-->
</div>
</div>
</body>
1 answers
solution1
0 2017-03-15 13:23:59
try below snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div style="width:830px; margin-left:50px;"> <div class="form-horizontal"> <ul class="nav nav-tabs"> <li class="active"><a href="#MaterialData" data-toggle="tab">Material Data</a></li> <li><a href="#MaterialColorAssignment" data-toggle="tab">Material Color Assignment</a></li> <li><a href="#MaterialVendorAssignment" data-toggle="tab">Material Vendor Assignment</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="MaterialData"> <div class="panel panel-primary"> <div class="panel panel-heading"><strong>Add/Edit Material</strong></div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <div class="col-md-4"> <input id="Category" class="form-control max-size" name="Category" required validationMessage="Select Category" /> <span class="k-invalid-msg" data-for="Category"></span> </div> <div class="col-md-4"> <input id="Type" class="form-control max-size" name="type" required validationMessage="Select type." /> <span class="k-invalid-msg" data-for="type"></span> </div> <div class="col-md-4" id="myDropdown"> <select class="form-control" name="subtype" id="SubType"></select> </div> </div> </div> </div> <div class="panel panel-heading"><strong>Material Information</strong></div> <div class="panel-body"> <div class="row"> <div class="form-group"> <label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"><b>Width</b></label> <div class="col-md-2"> <input id="txtWidth" type="text" class="form-control" name="width" required validationMessage="Please add width." /> @*<span class="k-invalid-msg" data-for="width"></span>*@ </div> <label for="txtLength" class="control-label col-md-1" id="lblLength"><b>Length</b></label> <div class="col-md-2"> <input id="txtLength" type="text" class="form-control" name="length" required validationMessage="Please add length." /> @*<span class="k-invalid-msg" data-for="length"></span>*@ </div> <label for="txtSize" class="control-label col-md-1" id="lblSize"><b>Size</b></label> <div class="col-md-2"> <input id="txtSize" type="text" class="form-control" name="size" required validationMessage="Please add size." /> @*<span class="k-invalid-msg" data-for="size"></span>*@ </div> </div> </div> </div> <div class="panel panel-heading"><strong>Pricing and Labor Cost</strong></div> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="row"> <label for="txtRemodel" class="control-label col-md-offset-5" id="lblDetail"><b>Sell Price</b></label> <label for="txtRemodel2" class="control-label col-md-offset-2" id="lblDetail"><b>Labor Cost</b></label> </div><!-- end row --> <br /> <div class="row"> <label for="txtRemodel12" class="control-label col-md-2" id="lblRemodel">Remodel</label> <div class="col-md-4 col-md-offset-2"> <input id="txtRemodel" type="text" class="form-control" name="remodel" required validationMessage="Please add sell prize." /> <span class="k-invalid-msg" data-for="remodel"></span> </div> <div class="col-md-4"> <input id="txtRemodel2" type="text" class="form-control" name="remodel2" required validationMessage="Please add labor cost." /> <span class="k-invalid-msg" data-for="remodel2"></span> </div> </div> <!-- end row --> </div> <div class="col-md-6"> <div class="row"> <label for="txtPurchaseQuantity" class="control-label col-md-offset-5" id="lblDetail"><b>Purchase</b></label> <label for="txtSellQuantity" class="control-label col-md-offset-2" id="lblDetail"><b>Sell</b></label> </div><!-- end row --> <br /> <div class="row"> <div class="col-md-3 col-md-offset-1"> <label for="txtQuantity" class="control-label " id="lblQuantity">Quantity</label></div> <div class="col-md-4 "> <input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" required="" validationmessage="Please add purchase qty."> <span class="k-invalid-msg" data-for="purchasequantity"></span> </div> <div class="col-md-4"> <input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" required="" validationmessage="Please add sell qty."> <span class="k-invalid-msg" data-for="sellquantity"></span> </div> </div> <!-- end row --> <div class="row row-splitter"> <div class="col-md-3 col-md-offset-1"><label for="txtUOM" class="control-label " id="lblUOM">UOM</label></div> <div class="col-md-1 "> <select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;" required validationMessage="Select purchase UOM"></select> <span class="k-invalid-msg" data-for="buyuom"></span> </div> <div class="col-md-1 col-md-offset-3"> <select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;" required validationMessage="Select sell UOM"></select> <span class="k-invalid-msg" data-for="selluom"></span> </div> </div> <!-- end row --> </div> </div> </div> </div> </div><!--End Material Data--> </div><!--End tab content--> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap row and columns are not aligning properly with checkboxes and labels
Having issues aligning 3 columns in HTML5
Having issues aligning text next to an image
Having issues aligning logo with H1 and H2 in header
Having issues getting Angular Routing to work properly
Aligning two labels in a Div
Aligning a set of labels and values
Aligning labels at the center
Aligning labels and inputs
Aligning p:inputText with labels
Related Tags