I don't know why, but i couldn't manage to align my labels (Label1 and Label2 here) with the input-group that follows each.
Here's my code :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="form-group col-md-6">
<label for="De_:_">Label1 : </label>
<div class="input-group">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
</div>
</div>
<div class="form-group col-md-6">
<label for="A_:_">Label2 : </label>
<div class="input-group">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
</div>
</div>
</div>
I did a fiddle too.
I inspired me from this http://getbootstrap.com/css/#forms-inline but I must have missed something :/
First you've missed to add an <form> element with class form-inline (or you haven't included it in your question).
Second your content in the .col-md-6 divs - .input-group is with higher width that's why it goes on the next line.
You have two options: you can make the inputs with lesser width or you can use col-* and build the form in a grid.
Here's an example for the second option:
<div class="form-group col-md-6">
<label for="De_:_" class="col-xs-2">Label1 : </label>
<div class="input-group col-xs-10">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
</div>
</div>
Demo: http://jsfiddle.net/axa0rz44/2/
This is the default behavior of Lables in HTML.
For inline lables, have a look at Horizontal-form, Bootstrap documentation
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<p style="font-family:monospace; color:red; text-align:center"> see in <b><i>Full Page</i></b> view, use other grid classes for smaller viewport.</p>
<div class="row">
<div class="form-group form-horizontal col-md-6">
<label class="col-md-2 control-label" for="De_:_">Label1 : </label>
<div class="input-group col-md-10">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
</div>
</div>
<div class="form-group form-horizontal col-md-6">
<label class="col-md-2 control-label" for="A_:_">Label2 : </label>
<div class="input-group col-md-10">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
</div>
</div>
</div>
Related
I am working on a HTML file where there is a row class(id="new-row") and inside the row there is a column (id="BillSum"). Now there are contents in the row/ specifically in the column of the row. I want to decrease the height of the row/the column inside the row but the CSS properties I specified isn't working. Can someone please tell where is the problem and what is the solution? I am pasting the code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row" id="new-row">
<div class="col-lg-7"></div>
<div class="col-lg-5" id="BillSum">
<div id="bs" class="flex bg-gray-200">
<label>Bill Summary</label>
</div>
<div class="row" id="st-id">
<label>Sub total</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">$</span>
<input type="text" id="st" name="Sub total" class="form-control Subtotal" placeholder="0.00" aria-label="Username" aria-describedby="basic-addon1"></td>
</div>
<!-- <input type="text" id="st" name="Sub total" class="form-control Subtotal" value="0"> -->
</div>
<div class="row" id="tax-id">
<label>Tax</label>
<div class="col=lg-6">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">%</span>
<input type="text" id="tax1" name="tax1" class="form-control tax1" placeholder="Enter Tax %" aria-label="Username" aria-describedby="basic-addon1" onkeyup="calculate(this.value);"></td>
<input type="text" id="tax2" name="tax2" class="form-control tax2" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
</div>
<!-- <input type="text" id="tax1" name="tax1" class="form-control tax1" placeholder="Enter Tax %" onkeyup="calculate(this.value);"> -->
<!-- </div>
<div class="col=lg-6">
<input type="text" id="tax2" name="tax2" class="form-control tax2">
</div> -->
</div>
</div>
<div class="row" id="dis-id">
<label>Discount(-)</label><br>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">$</span>
<input type="text" id="discBill" name="Discount_Bill" class="form-control disc1st" aria-label="Username" aria-describedby="basic-addon1" onkeyup="calculate(this.value);"></td>
</div>
<!-- <input type="text" id="discBill" name="Discount_Bill" class="form-control disc1st" onkeyup="calculate(this.value);"> -->
</div>
<div class="row" id="np-id">
<label>Net payable</label><br>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">$</span>
<input type="text" id="net_payable" name="Net_Payable" class="form-control disc2st" aria-label="Username" aria-describedby="basic-addon1"></td>
</div>
<!-- <input type="text" id="net_payable" name="Net_Payable" class="form-control disc2st"> -->
</div>
<div class="row" id="ra-id">
<label>Received amount</label><br>
<input type="text" id="received_amount" name="Received_amount" class="form-control ra" placeholder="Enter payment amount">
</div>
<div class="row" id="pv-id">
<label>Payvia</label><br>
<select class="form-control">
<option>Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
<div class="row" id="remarks">
<label>Remarks</label><br>
<input type="text" name="Sub total" class="form-control" placeholder="Write your remarks">
</div>
</div>
</div>
I'm a bit of a novice when it comes to Bootstrap and I'm struggling to get some form fields to conform to my desired layout. My sample snippet of HTML code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form id="frmRegister" class="form-horizontal">
<div id="divContainer" class="container-fluid" style="width: 90%">
<h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>
<div id="divChild1">
<div class="form-group">
<label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
</div>
<label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
</div>
<label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
</div>
<label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
</div>
</div>
<div class="form-group">
<label for="groupGender" class="control-label col-xs-1">Gender *</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
</label>
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
</label>
</div>
<label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
<div class="col-xs-1">
<input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
</div>
<label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
</div>
<label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
</div>
<label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
</div>
<label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
<div class="col-xs-11">
<input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The culprit appears to be my use of the input-group/input-group-addon classes which prepend the field with the dollar sign (Registration Fee). The result is that the subsequent fields for Uniform and Uniform Fee wrap to the next row rather than appearing inline on the same row with Registration Fee. The first two rows, which don't use input-group/input-group-addon do not have this problem.
Instead of using col-* and input group together, put the input-group inside the col-* like this..
<div class="col-xs-1">
<div class="input-group">
<div class="input-group-addon"> .. </div>
http://www.bootply.com/g6rtaYL4fy
I am trying to decrease middle name input field but i can't get it work. It only works at xs screen (picture below).
<div class="row">
<form class="form-inline" role="form" name="userForm" novalidate>
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id='first' name="first" >
<label for ="first">First </label>
</span>
</div>
<div class="input-group">
<span class="col-xs-3 col-sm-2">
<input type="text" class="form-control col-xs-3 col-sm-2" id='mi' name="mi" >
<label for ="mi">MI</label>
</span>
</div>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id = "last" name="last" >
<label for="last"> Last </label>
</span>
</div>
</div>
</form>
</div>
You're code is wrong please check again.you end the </form> before end other tag. and again read how to use bootstrap form. help this link.
remove span and add col-sm-4 to div
`
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id='first' name="first">
<label for="first">First </label>
</div>
<div class="input-group col-sm-1">
<input type="text" class="form-control " id='mi' name="mi">
<label for="mi">MI</label>
</div>
<div class="input-group col-sm-4">
<input type="text" class="form-control " id="last" name="last">
<label for="last"> Last </label>
</div>
<div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
<p ng-message="required">Child's First Name is required.</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</form>`
I would like to group the radio button and bootstrap select but they're not inline.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"><span class="input-group-addon"> Preset Size (<b>inch</b>):
</span></label>
<div class="col-md-6">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div> <!-- Radio + Dropdown -->
</form>
</div> <!-- container -->
and I also want to group 2 text boxes together with the label to create user input.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-sm-4">
<label> x </label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</form>
</div>
Here's the output screenshot.
You may need to re-arrange your code a bit to fit bootstrap's use.
Firstly, use .form-group - also put element in rows when possible.
Something along the lines of:
ps you may have to adjust this a bit but it should give you a good place to start from
.form-inline input.form-control {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-6">
<input name="radioGroup" id="radio1" value="option1" type="radio" />Preset Size (<b>inch</b>):
</label>
<div class="col-xs-5">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36”x84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-5">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio">Custom Size:
</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-xs-1">
<label>x</label>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</form>
</div>
You forgot the row div. whenever you are using bootstrap layout with columns- you need to nest the columns div inside a row div:
<div class="row">
<div class="col-sm-4"> first third</div>
<div class="col-sm-4"> second third</div>
<div class="col-sm-4"> third third</div>
</div>
Read the bootstrap doc for more information
Here are two ways you can do this depending on if you want all the elements in one row or not. It's just utilizing input-groups and not much else.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?
Is it possible to set a inner form-inline inside a form-horizontal like the below example:
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.
Eg:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
This uses twitter bootstrap 3.x with one css class to get labels to sit on top of the inputs. Here's a fiddle link, make sure to expand results panel wide enough to see effect.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Since bootstrap 4 use div class="form-row" in combination with div class="form-group col-X". X is the width you need. You will get nice inline columns. See fiddle.
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>
I know this is an old answer but here is what I usually do:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
to make it simple, just add a class="form-inline" before the input.
example:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label>
<input type="text" value="" name="" class="form-control" >
</div>