I'm trying to create a form with select boxes in Bootstrap 3 but for some reason I can't figure out how to get the select boxes to be the same width AND I can't figure out why there are not even gaps between the boxes when they are stacked above one another. ( the second and third boxes have no gap and I want a gap). Really appreciate if someone could tell me what I have got wrong.
I've made a fiddle here.
<div class="container">
<div class="row row-centered">
<div class="col-xs-8">
<h3> Quick Search </h3>
<form role="form" action="post" method="post">
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="form-group">
<div class="input-group">
<select class="form-control input-sm" name="location">
<option value="" disabled selected>Location</option>
<option value="London">London</option>
<option value="Bristol">Bristol</option>
<option value="Manchester">Manchester</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="input-group">
<select id="skill" name="skill" class="form-control input-sm" ">
<option value=" " disabled selected>Type of editor</option>
<option value=""> All editors</option>
<option value="offline">Offline editor</option>
<option value="online">Online editor</option>
<option value="offline,online ">Offline & Online editor</option>
</select>
</div>
</div>
</div>
<div class="form-group ">
<div class="col-xs-8 col-md-3 col-lg-3 ">
<div class="input-group ">
<select id="start " name="start " class="form-control input-sm "">
<option value="" disabled selected>When</option>
<option value="">Anytime</option>
<option value="today">Today</option>
<option value="tomorrow">Tomorrow</option>
<option value="next_week">Next Week</option>
<option value="this_month">This Month</option>
<option value="next_month">Next Month</option>
<option value="in_future">In the Future</option>
</select>
</div>
</div>
</div>
<div class="col-xs-8 col-md-3 col-lg-3">
<button type="submit" name="submit" value="submit_1" class="btn btn-small btn-default btn-pull-right">Search</button>
</button>
</div>
</form>
<br>
</div>
<!--Col-->
</div>
<!--row-->
Your formatting etc is a little strange but the fix you need for the odd spacing is simple enough.
The first section under H3
</h3>
<form role="form" action="post" method="post">
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="form-group">
<div class="input-group">
Just change to as follows :-
</h3>
<form role="form" action="post" method="post">
<div class="form-group">
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="input-group">
Your code blocks for each input group were not the same.
And Nickanor's fix for the min-width should resolve the spacing of the boxes to all be the same width.
I might suggest a little bit wider width though and add this to top of your page above the
<style>
.input-sm {
min-width: 160px !important;
}
</style>
.input-sm {
min-width: 150px !important;
}
https://jsfiddle.net/v94e5sun/
Try this instead..hope this helps
<!DOCTYPE html>
<html>
<head><title>Page Title</title>
</head>
<body>
<div class="container">
<div class="row row-centered">
<div class="col-xs-8">
<h3>
Quick Search
</h3>
<form role="form" action="post" method="post">
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="form-group">
<div class="input-group">
<select class="form-control input-sm" name="location">
<option value="disabled selected">Location</option>
<option value="London">London</option>
<option value="Bristol">Bristol</option>
<option value="Manchester">Manchester</option>
</select></div></div></div><div class="form-group">
<div class="col-xs-8 col-md-3 col-lg-4">
<div class="input-group">
<select id="skill" name="skill" class="form-control input-sm"><option value="disabled selected">Type of editor</option><option value=" ">All editors</option><option value="offline">Offline editor</option><option value="online">Online editor</option><option value="offline,online">Offline and Online editor</option></select></div></div></div>
Related
I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.
What am I missing?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<p align="center" style="color:red">
Open Store
</p>
<div class="OpenStore">
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Here is what it looks like in chrome:
html render
The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.
<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
style="width:100px">
<option data-value="English">English</option>
<option data-value="French">French</option>
</select>
The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.
Please use the <select></select> instead of <select/>
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
I am trying to style and put multiple search filters on the page in a line so the User Experience is much better but I am kind of stuck with how to style this search component
<section class="search-sec">
<div class="container">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input class="" type="text" name="name" placeholder="Name" value="#ViewData["name"]" />
</div>
<div class="col-lg-2 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
........
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
......
</select>
and
<select name="maxAge">
......
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
.....
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="#ViewData["stockNumber"]"
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Clear</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
The issue even after changing the sizes and all it looks like below
I tried looking for bootstrapping example and nothing helped. Can anyone please suggest how can I make this search functionality look better. Any help is greatly appreciated
The grid system contains 12 columns. If you want to put them in one line, the * in col-lg-* should sum within 12. Then you also need to adjust the letter to avoid the letter length over the div width.
Here is a whole working demo:
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-12 p-0">
<input class="" type="text" name="name" placeholder="Name" value="#ViewData["name"]" />
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<label for="age" class="">Age</label>
<select class="" name="age">
<option>- Any -</option>
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="minAge">Age range from</label>
<select name="minAge">
<option>- Start -</option>
<option>1</option>
<option>2</option>
</select>
to
<select name="maxAge">
<option>- End -</option>
<option>14</option>
<option>15</option>
</select>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<label for="sex">Sex</label>
<select name="sex">
<option>- Either -</option>
<option>male</option>
<option>female</option>
</select>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 p-0">
<label for="stockNumber">Stock No.</label>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 p-0">
<input type="text" name="stockNumber" value="aaa" />
</div>
<div class="col-lg-2 col-md-3 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Clear</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
#section Scripts
{
<style>
input[type="text"] {
width: 100%; //fit the div width
}
select {
width: 65px;
}
</style>
}
Result:
I'm trying to make a search bar for an ebay-type website, but for some reason, the submit button takes the column size of the previous asset, and also goes directly under this asset.
CODE
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</body>
You forgot to close <select>. You can reduce border-radius of input to get it more closer like ebay.
.NoPadding{
padding:0 !important;
}
input,select{
border-radius:1px !important
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-3 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</select>
</div>
<!-- BUTTON -->
<div class="col-sm-2 frm-group ">
<input type="submit" class="form-control btn-primary">
</div>
</form>
</div>
</body>
You simply didn't close select and div.form-group
Also, I would suggest adding col-md-#, where # is a number.
See here for the closed tags: https://jsfiddle.net/8z7cL5x0/
Try wrapping your columns in a div with class "row":
<body>
<div class="container">
<div class = "row">
<form class="form">
<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>
<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>
<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>
</form>
</div>
</div>
</body>
I am trying to align around 5 html components in one single line using bootstrap.
But could not and looks ugly like this, breaking to second line instead of being in one line.
HTML
<div class="form-group">
<p class="col-md-2 badge col-md-offset-1">Column 1</p>
<p class="col-md-1 badge">Column 2</p>
<p class="col-md-1 badge">Column 3</p>
<p class="col-md-2 badge">Column 4</p>
<p class="col-md-2 badge">Column 5</p>
</div>
<div class="form-group" ng-repeat="data in allData">
<label class="control-label col-md-3">{{data.label}}</label>
<div class="input-group col-md-4">
<input id="reportTypeId" type="text" class="form-control" ng-model="data.reportTypeId" style="display: none">
<datepicker date-format="yyyy-MM-dd">
<input id="startDate" type="text" class="form-control" ng-model="data.startDate">
</datepicker>
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
<datepicker date-format="yyyy-MM-dd">
<input id="endDate" type="text" class="form-control" ng-model="data.endDate">
</datepicker>
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
<select class="form-control" ng-model="data.countryId" required="required">
<option value="">Please select</option>
<option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option>
</select>
<select class="form-control" ng-model="data.cityCode" required="required">
<option value="">Please select</option>
<option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option>
</select>
</div>
</div>
Updated:-
JSFiddle : http://jsfiddle.net/jjayaraman/5dbkf1xw/
Hope this is what you are looking for. Took me awhile to figure it out, but I believe it's because you are wanting to hide that first text box, but you were specifying a col-md-1, which made the spacing look out of whack. Remove the col-md-1 and I think it's what you're looking for.
I also added some rows, and the container to get some better spacing.
Note: I was toying with the background-color properties to SEE where stuff was on the page.
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-md-2 badge col-md-offset-1">Column 1</div>
<div class="col-md-2 badge">Column 2</div>
<div class="col-md-2 badge">Column 3</div>
<div class="col-md-2 badge">Column 4</div>
<div class="col-md-2 badge">Column 5</div>
</div>
</div>
<div class="row">
<div class="col-md-1" style="background-color: yellow;">
<input id="reportTypeId" type="text" class="form-control" style="display: none">
</div>
<div class="col-md-2" style="background-color: red;">
<label class="control-label">Label</label>
</div>
<div class="col-md-2 input-group" style="background-color: green; padding-left: 5px; padding-right: 5px; float: left;">
<input id="startDate" type="text" class="form-control" ng-model="data.startDate">
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
</div>
<div class="col-md-2 input-group" style="background-color: blue; padding-left: 5px; padding-right: 5px; float: left;">
<input id="endDate" type="text" class="form-control" ng-model="data.endDate">
<p class="input-group-addon glyphicon glyphicon-calendar"></p>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="data.countryId" required="required">
<option value="">Please select</option>
<option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="data.cityCode" required="required">
<option value="">Please select</option>
<option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option>
</select>
</div>
</div>
</div>
http://jsfiddle.net/0yd6c7yt/
He's all aligned, but the label is getting 'stuck' on page side.
I tried using 'margin-left' but then he distorted everything else.
I want the result to be like this:
Below is my code:
http://jsfiddle.net/vzm7et7z/1/
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
<form id="form-sms" class="form-horizontal" method="post" action="salva.php">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="operadora">OPERADORA</label>
<div class="col-md-8">
<select id="operadora" name="operadora" class="form-control">
<option value="">Selecione uma operadora</option>
<option value="CLARO">Claro</option>
<option value="CTBC">CTBC</option>
<option value="OI">Oi</option>
<option value="NEXTEL">Nextel</option>
<option value="TIM">TIM</option>
<option value="VIVO">Vivo</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="ddd_destinatario">DESTINATÁRIO</label>
<div class="col-md-4">
<select id="ddd_destinatario" name="campoDDD_d" class="form-control">
<option value="">DDD</option>
<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option>
</select>
</div>
<div class="col-md-4">
<input id="telefone_destinatario" name="campoCEL_d" type="text" placeholder="" maxlength="9" class="form-control input-md numerico" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="nome">SEU NOME</label>
<div class="col-md-8">
<input id="nome" name="nome" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="ddd_remetente">SEU NÚMERO</label>
<div class="col-md-4">
<select id="ddd_remetente" name="campoDDD_r" class="form-control">
<option value="">DDD</option>
<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option>
</select>
</div>
<div class="col-md-4">
<input id="telefone_remetente" name="campoCEL_r" type="text" placeholder="" maxlength="9" class="form-control input-md numerico" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="campoSMS">MENSAGEM</label>
<div class="col-md-8 control-zero">
<textarea name="campoSMS" id="campoSMS" class="form-control textarea-sms" maxlength="100"></textarea>
<p class="help-block textarea-contagem"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-4 control-zero">
<button id="enviar" name="enviar" class="btn btn-enviar">ENVIAR!</button>
</div>
</div>
</fieldset>
</form>
</div>
CSS:
.form-horizontal .control-label{
/* text-align:right; */
height: 34px;
text-align:left;
background: #A0D468;
font-size: 16px;
}
.btn-form {
padding: 0;
}
.btn-enviar {
background: #8e44ad;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
.btn-enviar:hover {
background: #BE90D4;
color: #ffffff;
}
The issue is the column structure of Bootstrap CSS. Right now, you have:
<label class="col-md-4 control-label"></label>
<div class="col-md-8"></div>
Which makes the perfect col-md-12 for fullsize view. When you shrink this, it doesn't know how to handle the overflow, which is why the first col-md-4 appears in the wrong spot above the input. You're gonna want to look into visibile-sm, visible-xs, hidden-md etc classes of Bootstrap and design a separate layout for smaller devices. For example:
<div class="hidden-md hidden-lg">
<div class="row">
<div class="col-sm-12 col-xs-12">
<label>Example:</label>
</div>
<div class="col-sm-12 col-xs-12">
<input type="text" name="example" class="form-control" value=""/>
</div>
</div>
</div>
<div class="hidden-sm hidden-xs">
<div class="row">
<div class="col-md-4 col-lg-4">
<label>Example:</label>
</div>
<div class="col=md-8 col-lg-8">
<input type="text" name="example" class="form-control" value=""/>
</div>
</div>
</div>
Will render different designs for the same element depending on the size of the browser. Hopefully that can give you some insight, but it's up to you to figure out how you want your website/application laid out.
Change your <label class="col-md-4 control-label"></label> to
<div class="col-md-4">
<label class="control-label"></label>
</div>
use style="margin-left:15px;" with labels, its working fine, i have tested