Bootstrap 3, input group not responsive. Please guide

Question

[1]Bootstrap 3, input group is not showing properly in mobile. Please look at the code below. It appears perfectly on my macbook but on my iphone the input box does not appear fully and the search box appears on the next line.

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-1 ">
  </div>
  <div class="col-xs-12 col-sm-12 col-md-10 ">
    <div>
      <!--<form class="form-inline" role="form"  method="post" action="/reviews">-->
      <form method="POST" action="http://exelrate.dev/reviews" accept-charset="UTF-8" class="form-inline">
        <div class="form-group">
          <input type="hidden" name="_token" value="t1eHqUE5XYCkmSIYigI0q7RcXwPe265d7x1HyFRc">
          <div class="input-group">
            <div class="input-group-addon" style="min-width:110px;">Location</div>
            <input type="text" class="form-control "  id="mapsearch" name="mapsearch" placeholder="Enter City,Pin or Address" 
              style="height:43px; min-width:402px; font-size:1.0em;" required/>
            <div class="input-group-addon">
              <select id="carmodel" class="form-control input-sm" style="min-width:200px;" required="required" name="size">
                <option value="Car" selected="selected">Car</option>
                <option value="2-Wheeler">2-Wheeler</option>
              </select>
            </div>
            <input type="hidden" class="form-control input-sm" name="input_lat" id="input_lat" required>
            <input type="hidden" class="form-control input-sm" name="input_lng" id="input_lng" required>
          </div>
          <button type="submit" class="btn btn-danger" id="btn_search" style="width:200px;height:42px;">Search</button>
        </div>
      </form>
    </div>
  </div>
</div>

[1]: https://i.sstatic.net/YZ8m4.png [mobile site]

Answer 1

Your inline styling affects Bootstrap. Also, you made some common Bootstrap mistakes:

• placed an input-group inside a form-group (this is not a biggie but I had alignment issues with it in some browser versions - avoid if possible).
• placed multiple inputs in one input-group. don't do it, even if only one is type="text" and the rest are hidden.
• you don't need an empty column for offseting. use the offseting classes from Bootstrap (col-md-offset-1 in your case).

Here's a fixed version of your form:

NOTE: You don't need the CSS (form {margin: 15px;}) rule, I just added it for the stackoverflow snippet.

form {
  margin: 15px;
}
@media (min-width: 768px) {
  form .hidden-xs {
    display: table-cell !important;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
    <div>
      <!--<form class="form-inline" role="form"  method="post" action="/reviews">-->
      <form method="POST" action="http://exelrate.dev/reviews" accept-charset="UTF-8" class="form-inline">

        <input type="hidden" name="_token" value="t1eHqUE5XYCkmSIYigI0q7RcXwPe265d7x1HyFRc">
        <div class="input-group">
          <div class="input-group-addon hidden-xs">Location</div>
          <input type="text" class="form-control" id="mapsearch" name="mapsearch" placeholder="Enter City,Pin or Address" style="min-height:44px;" required/>
          <div class="input-group-addon">
            <select id="carmodel" class="selectpicker form-control input-sm" required="required" name="size" style="min-width: 120px">
              <option value="Car" selected="selected">Car</option>
              <option value="2-Wheeler">2-Wheeler</option>
            </select>
          </div>
        </div>
        <input type="hidden" class="form-control input-sm" name="input_lat" id="input_lat" required>
        <input type="hidden" class="form-control input-sm" name="input_lng" id="input_lng" required>
        <button type="submit" class="btn btn-danger" id="btn_search" style="min-width:200px;height:42px; margin-top: 15px;">Search</button>
      </form>
    </div>
  </div>
</div>