Issue with datepicker alignment with bootstrap - html

Question

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.

Answer 1

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>