I'm trying to align filter boxes into a grid that spans 3 blocks per row...
I didn't want to lose the bootstrap look so I haven't tried to strip out some of these navbar/input group classes. Is there a clean way to fix this? What approach should I take to troubleshooting stuff like this in the future? jsFiddle below
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form"> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter: </span>
<input class="form-control" ng-model="filterOptions.filterText" />
</span> <span class="input-group col-sm-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span>
</form>
http://jsfiddle.net/u1wffrd4/1/
Try this:
.input-group {
width:100%;
}
<div class="table-responsive">
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form">
<div class="col-sm-4 col-xs-12">
<span class="input-group">
<span class="input-group-addon" style="width: 20%">Filter: </span>
<input class="form-control" ng-model="filterOptions.filterText" />
</span>
</div>
<div class="col-sm-4 col-xs-12">
<span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span>
</div>
<div class="col-sm-4 col-xs-12">
<span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span>
</div>
</form>
</nav>
</div>
.input-group.col-xs-4.col-md-4 {
float: left;
padding: 5px;
}
<div class="table-responsive">
<nav ng-if="filterOn" class="navbar navbar-default">
<form class="navbar-form">
<div class="show-grid">
<span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter: </span>
<input ng-model="filterOptions.filterText" class="form-control">
</span>
<span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span>
<span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span>
</div>
</form>
</nav>
</div>
You have to wrap your code with .container or .container-fluid and .row classes.
Check this http://jsfiddle.net/manishrane1/u1wffrd4/2/
<div class="container">
<div class="row">
<div class="table-responsive">
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form">
<div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter: </span>
<input class="form-control" ng-model="filterOptions.filterText" />
</span></div>
<div class="col-xs-4"><span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
<select class="form-control" name="mySelect1" ng-model="sel1">
<option></option>
<option>{{selections}}</option>
</select>
</span></div>
<div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter B: </span>
<select class="form-control" name="mySelect2" ng-model="nameVarTo">
<option></option>
<option>selections2</option>
</select>
</span></div>
</form>
</nav>
</div>
</div>
</div>
Related
I am trying to align the input controls and facing issue with the alignment.
Here is the code snippet I tried to create the UI design.I need to create UI with rectangle borders/containers around each set of input controls and let me know if we can achieve similar with Booststrap. .
In the above picture the 'calendar icon' is not moving next to 'Date' textbox and pushing other controls which is causing alignment issue.
I have mock up design as well.
<div class="container-fluid bg-3 text-center">
<form>
<div class="form-row">
<div class=" form-group date col-md-2 ">
<label for="DateFrom">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="form-group date col-md-2">
<label for="Dateto">Date To</label>
<input type="text" class="form-control" id="Dateto">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class=" form-group col-md-2 ">
<label for="DD1">Dropdown1</label>
<select class="form-control" id="DD1">
<option selected value=All>All</option>
<option value=Val1>Val1</option>
<option value=Val2>Val2</option>
</select>
</div>
<div class=" form-group col-md-3 ">
<label for="DD2">Dropdwon2</label>
<select class="form-control" id="DD2">
<option value=All>All</option>
<option value=val1>val1</option>
<option value=val2>val2</option>
</select>
</div>
<div class=" form-group col-md-3 ">
<label for="DD3">Dropdown3</label>
<select class="form-control" id="disposition">
<option value=All>All</option>
</select>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-2">
<label for="Date">Date</label>
<label class="radio-inline"><input type="radio" name="dateradio" checked>Start Date</label>
<label class="radio-inline"><input type="radio" name="dateradio">End Date</label>
</div>
<div class="form-group col-md-2">
<label for="dd4">Dropdown4</label>
<select class="form-control" id="dd4">
<option selected value=All>All</option>
</select>
</div>
<div class=" form-group col-md-2 ">
<label for="DDl5">Dropdowmn5</label>
<select class="form-control" id="DDl5">
<option value=All>All</option>
</select>
</div>
<div class=" form-group col-md-2">
<label for="Dsply">Display</label>
<label class="radio-inline"><input type="radio" name="Dsply" checked>Val1</label>
<label class="radio-inline"><input type="radio" name="Dsply">Val2</label>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-2">
<button type="button" class="btn btn-success" >btn1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" >btn2</button>
</div>
<div class=" form-group col-md-2 ">
<button type="button" class="btn btn-success" >btn3</button>
</div>
<div class=" form-group col-md-2">
<button type="button" class="btn btn-primary" >btn4</button>
</div>
</div>
</form>
</div>
Please find mock up design and expected output
Could you please let me know how to fix alignment and move 'calendar icon' next/inside-right to date textbox and get the borders around input controls.
I'm gonna try to answer first about the 'calendar icon'.
You need to make css that gonna show icon in background and push text I would do it like this:
#icon {
height: 40px;
margin-top: 10px;
border: 1px solid #e6e6e6;
padding-left: 40px;
padding-right: 50px;
background: #f5f5f5 url(http://i.imgur.com/5xD8KRw.png);
background-repeat: no-repeat;
background-position: left 10px center;
}
<input type="text" id="icon" value="input">
If you need to use only Bootstrap then I would suggest to use <span> with bootstrap class input-group-addon and put <i> tag with icon inside it.
For example:
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
</form>
So the output should be something like this:
And for this you need to find the right size of column in Bootstrap so basically your col-md-2 if you change the number to 4,3,5,8 (col-md-4) it's gonna make different size of column in row so you can play with it.
Other changes:
- for new line you can use HTML tag <br />
- and to align radio buttons use class text-left
<div class="container-fluid bg-3 text-center">
<form>
<div class="form-row">
<div class=" form-group date col-md-3 ">
<label for="DateFrom">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="form-group date col-md-3">
<label for="Dateto">Date To</label>
<input type="text" class="form-control" id="Dateto">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class=" form-group col-md-2 ">
<label for="DD1">Dropdown1</label>
<select class="form-control" id="DD1">
<option selected value=All>All</option>
<option value=Val1>Val1</option>
<option value=Val2>Val2</option>
</select>
</div>
<div class=" form-group col-md-2 ">
<label for="DD2">Dropdwon2</label>
<select class="form-control" id="DD2">
<option value=All>All</option>
<option value=val1>val1</option>
<option value=val2>val2</option>
</select>
</div>
<div class=" form-group col-md-2 ">
<label for="DD3">Dropdown3</label>
<select class="form-control" id="disposition">
<option value=All>All</option>
</select>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-4 text-left">
<label for="Date">Date</label>
<br />
<label class="radio-inline"><input type="radio" name="dateradio" checked>Start Date</label>
<label class="radio-inline"><input type="radio" name="dateradio">End Date</label>
</div>
<div class="form-group col-md-3">
<label for="dd4">Dropdown4</label>
<select class="form-control" id="dd4">
<option selected value=All>All</option>
</select>
</div>
<div class=" form-group col-md-3 ">
<label for="DDl5">Dropdowmn5</label>
<select class="form-control" id="DDl5">
<option value=All>All</option>
</select>
</div>
<div class=" form-group col-md-2 text-left">
<label for="Dsply">Display</label>
<br />
<label class="radio-inline"><input type="radio" name="Dsply" checked>Val1</label>
<label class="radio-inline"><input type="radio" name="Dsply">Val2</label>
</div>
</div>
<div class="form-row">
<div class=" form-group col-md-2">
<button type="button" class="btn btn-success" >btn1</button>
</div>
<div class="form-group col-md-2">
<button type="button" class="btn btn-success" >btn2</button>
</div>
<div class=" form-group col-md-2 ">
<button type="button" class="btn btn-success" >btn3</button>
</div>
<div class=" form-group col-md-2">
<button type="button" class="btn btn-primary" >btn4</button>
</div>
</div>
</form>
</div>
As title,
I tried to create a block of inputs, where each input will be just next to each other, table-like-style as in the image below.
The code for above is
<div class="row">
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker">
</select>
</div>
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 padding-sides-none">
<input class="form-control" />
</div>
</div>
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date- format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 padding-sides-none">
<input class="form-control"></input>
</div>
</div>
</div>
Select is using bootstrap-select while datepicker uses bootstrap-datetimepicker, and using Bootstrap 3.3.0.
Problem is the input border, which looks thicker when each input is on each other's side. The border side which touches the other inputs is somewhat thicker.
I want the touching sides of each input to be in border-collapse style, just like the border-collapse for table, where each border side will have the same thickness, but i just can't seem to get it done properly.
How can i achieve this?
i resolved your problem
please check below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.formSection .nopadding {padding: 0;}
.formSection .form-control {border-radius: 0;}
.formSection select.form-control {border-bottom: 0;border-right: 0;}
.formSection .col-xs-3 input.form-control {border-bottom: 0;}
.formSection .input-group-addon {min-width: 36px;border-right: 0; border-radius: 0;}
.formSection .input-group {display: flex;}
</style>
<div class="formSection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker">
</select>
</div>
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 nopadding">
<input class="form-control" />
</div>
</div>
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date- format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 nopadding">
<input class="form-control"></input>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With few minor modifications to your code and with some css you can get the expected result, please check the working example below:
note: select-box appearance is set to none to clear the default ui provided by browser.
.row.compact-row {
margin-right: 0;
margin-left: 0;
}
.row.compact-row > [class^="col-"],
.row.compact-row > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
margin: -1px 0 0 -1px;
}
.compact-row .input-group-addon {
border-radius: 0;
}
.compact-row .form-control {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br/><br/>
<div class="container">
<div class="row compact-row">
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<input class="form-control" />
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date- format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6">
<input class="form-control" type="text" />
</div>
</div>
</div>
I want to make a good looking responsive search form with CSS Bootstrap.
Following is my html and bootstrap code:
<form class="form-inline" role="form" style="">
<div class="row">
<div class=" col-md-4 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
<input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Location</span>-->
<select class="form-control">
<option>London</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Category</span>-->
<select class="form-control" style="">
<option>Administration</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-2 form-group group-1">
<input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
</div>
</div>
</form>
This is how it looks on laptop screen:
enter image description here
This is how it looks on mobile device:
enter image description here
As you can see it looks very nice on mobile devices with full width of form inputs, but it does not look good on my laptop screen. I want to make full width on every device screen. Please help.
Just put your code to :<div class="container"> your code </div> so it will look better.
<div class="container">
<form class="form-inline" role="form" style="">
<div class="row">
<div class=" col-md-4 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
<input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Location</span>-->
<select class="form-control">
<option>London</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Category</span>-->
<select class="form-control" style="">
<option>Administration</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-2 form-group group-1">
<input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
</div>
</div>
</form>
</div>
To get better result, see the documents for container here Container Bootstrap Documentation
I have a problem joining multiple select tags into .input-group.
Here is my code:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 2</label>
<div class="col-md-6">
<select class="form-control" >
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group col-md-6">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
</div>
</div>
</form>
The problem is as follows:
In the last form-group, after the Label 3, three span's with select inside them have higher width then they should have and they overlap to the right and left of their input-group container (about 15 px).
Here is jsfiddle demostrating the problem (just click on first or third select in the last row)
Made another div for using class="form-group", See DEMO on full page mode in snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 2</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="col-md-6">
<div class="input-group ">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
change HTML
<form class="form-horizontal container-fluid" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 1</label>
<div class="col-md-6">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6" >Label 2</label>
<div class="col-md-6">
<select class="form-control" >
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox for following text input">
</span>
<select class="form-control">
</select>
</div>
</div>
</div>
</div>
</form>
https://jsfiddle.net/qrtcq8bs/4/
just add
the margin-left:0; & margin-right:0;
in the form-group
because by default is negative
<div class="form-group" style="margin-left:0 !important; margin-right:0 !important;">
<label class="control-label col-md-6">Label 3</label>
<div class="input-group col-md-6">
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
<span class="input-group-btn">
<select class="form-control">
</select>
</span>
</div>
</div>
I am working on a date range control and i want to append icon at the end of the input box but it shows up in new line.
I want all controls like location, start date, end date etc.. in one row for screen larger than 768px and calendar icon appended at the end of start & end input control like it is in the shown on codepen.
Example: http://codepen.io/anon/pen/pggjax
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class="col-xs-2">
<label>Location One </label>
<select id="location1">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-xs-2">
<label>Location Two </label>
<select id="location2">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-xs-4 ">
<label>Start </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
<div class="col-xs-4 ">
<label>End </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
<div class="col-xs-2">
<button name="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class=" col-md-2 col-xs-12">
<label>Location One </label>
<select id="location1">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-md-2 col-xs-12">
<label>Location Two </label>
<select id="location2">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-md-3 col-xs-12 ">
<div class="input-group">
<input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
</div>
<div class=" col-md-3 col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="end Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
<!-- <label>End </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>-->
</div>
<div class="col-md-2 col-xs-12">
<button name="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
<p></p>
<p>
Example
<div class="form-group ">
<label class="col-xs-3 control-label ">Date</label>
<div class="col-xs-5 date ">
<div class="input-group input-append date " id="dateRangePicker ">
<input type="text " class="form-control " name="date " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
</div>
</p>
First i would remove input type class input-sm then instead of span class input-group-addon add-on i would add input-group-btn then for the select values use form-group with class form-control instead
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class="col-xs-2">
<div class="form-group">
<label for="location1">Location One</label>
<select class="form-control" id="location1">
<option value="1">Value1</option>
</select>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label for="location2">Location Two</label>
<select class="form-control" id="location2">
<option value="1">Value1</option>
</select>
</div>
</div>
<div class="col-xs-3">
<label>Start </label>
<div class="input-group">
<input type="text" class="form-control" name="start ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<label>End </label>
<div class="input-group">
<input type="text" class=" form-control" name="start ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-2 btn-group-vertical">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>