Bootstrap Multicolumn Form-horizontal Styling only one one col- - html

I have an order form on my website, using the form-horizontal class provided in bootstrap. The form has a left and right section in the form of two columns. The left col is formatting great as it should with form-horizontal but the right col isn't unfortunately. Any help to get it looking right would be greatly appreciated!
You can find it live here: http://www.bannermastering.co.uk/order.html
Form Code
<form id="orderform" name="orderform" class="form-horizontal" role="form" method="post" action="ordermailer.php">
<div class="row">
<!-- """"""""""""""""""""""""""""""""""""" -->
<!-- CLIENT INFO [Left side of order form] -->
<!-- ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, -->
<div class="col-md-5 col-md-offset-1 col-sm-12 form-top-border form-bg client-info">
<h2 class="text-center"><i class="fa fa-user"></i> Client Info</h2>
<div class="form-group">
<label for="txtartistname" class="col-sm-3 control-label ">Artist Name</label>
<div class="col-sm-7">
<input id="txtartistname" name="txtartistname" type="text" class="form-control" placeholder="Artist / Group / Band Name"/>
</div>
</div>
<div class="form-group">
<label for="txtclientname" class="col-sm-3 control-label">Your Name</label>
<div class="col-sm-7">
<input id="txtclientname" name="txtclientname" type="text" class="form-control" placeholder="Your Name"/>
</div>
</div>
<div class="form-group">
<label for="txtemail" class="col-sm-3 control-label">Email</label>
<div class="col-sm-7">
<input id="txtemail" name="txtemail" type="email" class="form-control" placeholder="example#domain.com"/>
</div>
</div>
<div class="form-group">
<label for="txtnotes" class="col-sm-3 control-label">Track Listing & Notes</label>
<div class="col-sm-9">
<textarea id="txtnotes" name="txtnotes" class="form-control" rows="4"
placeholder="Please enter Track Names and Additional Information e.g Mastering Preferences" value=""></textarea>
</div>
</div>
</div>
<!-- """""""""""""""""""""""""""""""""""""""" -->
<!-- ORDER DETAILS [right side of order form] -->
<!-- ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, -->
<div class="col-md-5 col-sm-12 form-top-border order-details form-bg">
<h2 class="text-center"><i class="fa fa-shopping-cart"></i> Order Details</h2>
<div class="form-group">
<label for="txttrackquantity" class="col-sm-9 control-label label-padding bottom-border-dark">Number of Tracks to Master</label>
<div class="col-sm-3 margin5">
<input id="txttrackquantity" name="txttrackquantity" type="text" onkeyup="calculatetotal()" class="form-control" placeholder="0" maxlength="2" data-fv-notempty />
</div>
</div>
<div class="form-group">
<label for="txtstemquantity" class="col-sm-9 control-label label-padding bottom-border-dark">How many of these need Stem Mastering?</label>
<div class="col-sm-3 margin5">
<input id="txtstemquantity" name="txtstemquantity" type="text" onkeyup="calculatetotal()" class="form-control" placeholder="0" maxlength="2"/>
</div>
</div>
<div class="form-group">
<label for="txtdualquantity" class="col-sm-9 control-label label-padding bottom-border-dark">How many require a Dual Master?</label>
<div class="col-sm-3 margin5">
<input id="txtdualquantity" name="txtdualquantity" type="text" onkeyup="calculatetotal()" class="form-control" placeholder="0" maxlength="2"/>
</div>
</div>
<div class="form-group">
<label for="chkDDP" class="col-sm-9 control-label label-padding bottom-border-dark">DDP Format Master</label>
<div class="col-sm-2 margin5">
<input id="chkDDP" name="chkDDP" type="checkbox" class="faChkSqr" onclick="calculatetotal()"/><br>
</div>
</div>
<div class="form-group">
<label for="rdoloudness" class="col-sm-4 control-label bring-left small-top-padding">Desired Loudness</label>
<br>
<div class="col-sm-12">
<label class="radio-inline">
<input id="engineersdiscretion" name="rdoloudness" value="Engineers Discretion" type="radio" checked/>Engineers Discretion
</label>
<label class="radio-inline">
<input id="dynamic" name="rdoloudness" value="Dynamic" type="radio"/>Dynamic
</label>
<label class="radio-inline">
<input id="balanced" name="rdoloudness" value="Balanced" type="radio"/>Balanced
</label>
<label class="radio-inline">
<input id="loud" name="rdoloudness" value="Loud" type="radio"/>Loud
</label>
</div>
</div> <!-- / Loudness Radios -->
</div> <!-- /COL ORDER DETAILS -->
<!-- PRICING ROW -->
<div class="row">
<div class="col-md-5 col-md-offset-1 credit-card-logos">
<div class="col-xs-3 margin40">
<h4 class="pull-right"><strong>Pay With</strong></h4>
</div>
<div class="col-xs-9">
<!-- PayPal Logo -->
<table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/AM_mc_vs_ms_ae_UK.png" border="0" alt="PayPal Acceptance Mark"></td></tr></table><!-- PayPal Logo -->
</div> <!-- /col-md-10 -->
</div><!-- End Credit card logos left panel -->
<!-- PRICE PANEL -->
<div class="col-md-5 form-top-border form-bg pricing-panel">
<div class="col-sm-6">
<h2 id="txttotalprice" name="txttotalprice">Total £0.00</h2>
<div class="row">
<div class="form-group">
<label for="cbocurrency" class="col-xs-3 col-xs-offset-1 control-label" style="padding-top: 5px">Currency</label>
<div class="col-xs-5 col-xs-offset-1" style="padding-top: 5px">
<select id="cbocurrency" name="cbocurrency" onchange="calculatetotal()">
<option value="£">GBP</option>
<option value="$">USD</option>
<option value="€">EUR</option>
<option value="$">AUD</option>
</select>
</div>
</div><!-- /form-group -->
</div><!-- /row -->
</div><!-- /col-sm-5 -->
<div class="col-sm-4">
<div class="form-group">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn order-button">Confirm & Pay</button>
</div><!-- /form-group -->
</div><!--/col-sm-4 -->
<!-- Hidden inputs to hold data for the PHP script that emails the order -->
<div class="form-group">
<input type="hidden" id="hidtotalprice" name="hidtotalprice" value="">
<input type="hidden" id="hidcurrencycode" name="hidcurrencycode" value="">
<input type="hidden" id="hidcurrencysymbol" name="hidcurrencysymbol" value="">
<input type="hidden" id="hidurlend" name="hidurlend" value="">
</div>
</div><!-- End Price /col-md-5 -->
</div> <!-- End Row -->

It is not clear for me what would look RIGHT for you, but from what I see, you might want to move the underlines on the right a bit by adding padding-left:30px for example to the right div:
<div class="col-md-5 col-sm-12 form-top-border order-details form-bg" style="padding-left: 30px;">

Related

HTML - moving <div> container below to one below without breaking other <div> containers [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to move my "Seller" container right below my "Corporation Store" container. I added a visual presentation.
I tried using clear:bothand clear:left; however, it was messing the other containers: "Customer" and "Product".
So, I tried putting the "Seller" container into a new row and tried using clear:both to put the "Seller" container below "Corporation" container.
Because the "Customer" container is big, it creates a huge gap between "Seller" and "Corporation" containers. Is there a way I can fix this problem or approach this problem different?
Thank you
jsfiddle
I achieved what your end result by wrapping both "Corporation Store" and "Seller ID" in their own "col-xs-3" container and then stripping them of that same class.
<!DOCTYPE html>
<html>
<head>
<title>Corp Simulator</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/sweetalert2.min.css">
<link rel="stylesheet" href="../css/home.css">
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default">
<!-- container -->
<div class="container">
<!-- header -->
<div class="navbar-header">
<div class="col-xs-12 navbar-header-padding">
<span class="col-xs-3"><img src="../img/corp-logo-flat.png"/></span>
<span class="col-xs-9"><a class="navbar-brand">Corp Simulator</a><a type="button" data-toggle="modal" data-target="#buildModal" class="label label-default pull-right ">Build</a></span>
</div>
</div>
</div>
</nav>
<!-- begin content -->
<div class="col-sm-12">
<div class="col-xs-8">
<!-- corporation -->
<div class="col-xs-12">
<h2>Corporation</h2>
<!-- begin form -->
<form id="cForm">
<!-- begin row -->
<div class="row">
<div class="col-xs-3">
<!-- corporation store -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Corporation Store</div>
<div class="panel-body">
<div class="col-xs-12 no-left-right-padding">
<div class="col-xs-6 no-right-padding">
<div class="form-group">
<label for="corpId">Corporation ID #</label>
<input type="text" class="form-control" tabindex="1" name="corpId" id="corpId" schoolId="corpId">
</div>
</div>
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="datetime-local" class="form-control" tabindex="2" name="startDate" id="startDate" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endTime">End Time</label>
<input type="datetime-local" class="form-control" tabindex="3" name="endTime" id="endTime" placeholder="End Time">
</div>
</div>
</div>
</div>
<!-- seller info -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Seller ID</div>
<div class="panel-body">
<div class="form-group">
<label for="sellerId">SE ID</label>
<input type="text" class="form-control" tabindex="4" name="sellerId" id="sellerId" placeholder="SE ID">
</div>
<div class="form-group">
<label for="seFirstName">SE First Name</label>
<input type="text" class="form-control" tabindex="5" name="seFirstName" id="seFirstName" placeholder="SE First Name">
</div>
<div class="form-group">
<label for="seLastName">SE Last Name</label>
<input type="text" class="form-control" tabindex="6" name="seLastName" id="seLastName" placeholder="SE Last Name">
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!--customer -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Customer</div>
<div class="panel-body">
<div class="col-xs-6">
<div class="form-group">
<label for="customerId">Customer ID</label>
<input type="text" class="form-control" tabindex="7" name="customerId" id="customerId" placeholder="Customer ID">
</div>
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" tabindex="9" name="companyName" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="customerFirstName">First Name</label>
<input type="text" class="form-control" tabindex="11" name="customerFirstName" id="customerFirstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="customerAddress1">Address 1</label>
<input type="text" class="form-control" tabindex="13" name="customerAddress1" id="customerAddress1" placeholder="Address 1">
</div>
<div class="form-group">
<label for="customerCity">City</label>
<input type="text" class="form-control" tabindex="15" name="customerCity" id="customerCity" placeholder="City">
</div>
<div class="form-group">
<label for="customerPostalCode">Postal Code</label>
<input type="text" class="form-control" tabindex="17" name="customerPostalCode" id="customerPostalCode" placeholder="Postal Code">
</div>
<div class="form-group">
<label for="customerPhone1">Phone 1</label>
<input type="text" class="form-control" tabindex="19" name="customerPhone1" id="customerPhone1" placeholder="Phone 1">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="relationshipType">Relationship</label>
<input type="text" class="form-control" tabindex="8" name="relationship" id="relationship" placeholder="Relationship">
</div>
<div class="form-group">
<label for="nationalId">National Identifier</label>
<input type="text" class="form-control" tabindex="10" name="nationalId" id="nationalId" placeholder="National ID">
</div>
<div class="form-group">
<label for="customerLastName">Last Name</label>
<input type="text" class="form-control" tabindex="12" name="customerLastName" id="customerLastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="customerAddress2">Address 2</label>
<input type="text" class="form-control" tabindex="14" name="customerAddress2" id="customerAddress2" placeholder="Address 2">
</div>
<div class="form-group">
<label for="customerState">State/Province</label>
<input type="text" class="form-control" tabindex="16" name="customerState" id="customerState" placeholder="State/Province">
</div>
<div class="form-group">
<label for="customerCountryCode">Country Code</label>
<input type="text" class="form-control" tabindex="18" name="customerCountryCode" id="customerCountryCode" placeholder="Country Code">
</div>
<div class="form-group">
<label for="customerPhone2">Phone 2</label>
<input type="text" class="form-control" tabindex="20" name="customerPhone2" id="customerPhone2" placeholder="Phone 2">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="customerEmail">Email</label>
<input type="email" class="form-control" tabindex="22" name="customerEmail" id="customerEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
<!-- product -->
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Product</div>
<div class="panel-body">
<div class="form-group">
<label for="prodId">Product ID</label>
<input type="text" class="form-control" tabindex="23" name="prodId" id="prodId" placeholder="PRODUCT ID">
</div>
<div class="form-group">
<label for="modelYear">Year</label>
<input type="text" class="form-control" tabindex="24" name="modelYear" id="modelYear" placeholder="Year">
</div>
<div class="form-group">
<label for="model">Model</label>
<input type="text" class="form-control" tabindex="25" name="model" id="model" placeholder="Model">
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</form>
<!-- end form -->
</div>
</div>
</div>
</body>
</html>
The snippet is limited in its view, but you will see the layout you wanted to achieve.

Bootstrap col-md-4 inside a col-md-12

I'm trying to have a col-md-4 inside a col-md-12, but it is not working.
HTML:
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-md-12">
<input type="number" required="required" class="col-md-4" placeholder="Rule1" />
<input type="number" required="required" class="col-md-4" placeholder="Rule2" />
<input type="number" required="required" class="col-md-4" placeholder="Rule3" />
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
Does anyone know how can I put the Rules side by side in the row?
Thanks
use
<div class="col-xs-4"></div>
or "col-md-4" xs just to show in this tiny preview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-12 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule1" />
</div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule2" /> </div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule3" /> </div>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
</div>

Having issues on aligning labels properly

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 U.O.M labels
as you can see the Quantity and U.O.M 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 U.O.M 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">Material Data</li>
<li>Material Color Assignment</li>
<li>Material Vendor Assignment</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>
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">Material Data</li>
<li>Material Color Assignment</li>
<li>Material Vendor Assignment</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">U.O.M</label></div>
<div class="col-md-1 ">
<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>

HTML textbox not inline

I acurrently have two input controls on the same line however they do not seem to align properly with the other controls above it and it looks rather off. I am not sure how to get them to align properly. Here is what the modal currently looks like: http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb It's almost there but not quite there yet. Here is the HTML that I have writtem
<div id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<div class="col-md-5">
<label class="col-md-4 control-label" for="valueMin">Value Range:</label>
<div class="col-md-8">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
</div>
</div>
<div class="col-md-2">
<p>-</p>
</div>
<div class="col-md-5">
<div class="col-md-8">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
and here is my css that was auto generated when created my MVC project in visual studio
input,
select,
textarea {
max-width: 280px;
}
It is good practice to use rows when making columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I have fixed your code in a pen.
http://codepen.io/costh/pen/XbzGxL
Looks like your columns are a bit confused...
Try this :
<div class="col-md-12" id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<div class="col-md-4">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<div class="col-md-4">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="valueMin">Value Range:</label>
<div class="col-md-10">
<div class="col-md-4">
<div class="col-md-5" style="padding-left:0px;">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
</div>
<div class="col-md-2">
<p style="text-align:center;">-</p>
</div>
<div class="col-md-5" style="padding-right:0px;">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
</div>
Please excuse the in-line styles!
Try this:
<div class="col-md-5">
<div class="input-daterange input-group" id="valuerang">
<span class="input-group-addon">Value Range:</span>
<input class="input-sm form-control" name="start" type="text" id="abc" required> <span class="input-group-addon"> - </span>
<input class="input-sm form-control" name="end" type="text" id="abc" required>
</div>
</div>
make sure you modify the tag names to suit your application.

Dividing form into two columns with twitter bootstrap

What is the correct way to style form with bootstrap in the following scenario:
I need to use fieldset (that will be styled later)
I need to divide form into two columns
Each column has label+control, some will have label+control1+control2 etc.
I am new to bootstrap. I have come to the following solution (jsfiddle).
The question is: is this the correct way to do this? Does it not violate the bootstrap semantics?
I do not understand when to use form-group, am I using it correctly?
Should I not include some class="row" here for correct semantics?
HTML:
<div class="container">
... <some content here> ....
<form class="form-horizontal">
<fieldset>
<legend>Portfolio</legend>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label3</label>
<div class="col-xs-8 form-inline">
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control1" />
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
I have seen all Bootstrap form examples, but I do not get how to separate form into two columns. I have also read the whole documentation, but I feel that this is not the right way how to use col and other classes.
Column separation happens inside container elements.
Each time you have an element you want to do grid inside it, give it class="container" and in it u can use the normal row and column classes.
Also check Bootstrap's out of the box form styles.
Below are the bare bones, add on to it what u need (like text align etc)
<form class="container">
<div class="row">
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
</div>
</form>
I face this problem with bootstrap 4 and I found that whenever we want to divide inside our form into many columns we should use container and row class. because the bootstrap grid take its style from its parent (.container and .row)
see this example :
<main>
<div class="container-fluid mt-3">
<div class="row">
<form method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">Full Name</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">fatherName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">LastName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">salary</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">tax</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<button type="submit">save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</main>
I'am sure it will work!