title: Prevent Bootstrap columns overlapping
body: <p>Could you lease tell me how to prevent the brands select box from being hidden behind the date. I gave minimum width to dates because I do not want them to collapse more than the minimum width.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10"&gt;
      &lt;form accept-charset="UTF-8" method="post"&gt;
          &lt;div style="margin:0;padding:0;display:inline"&gt;
              &lt;input name="utf8" type="hidden" value="✓"&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3 col-sm-4 col-xs-12"&gt;
                  &lt;div class="form-group credits-daterange"&gt;
                      &lt;label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date"&gt;Date&lt;/label&gt;
                      &lt;div class="col-sm-10 col-xs-12"&gt;
                          &lt;div class="input-group input-daterange" data-date-format="yyyy-mm-dd" style="min-width: 236px;"&gt;
                              &lt;input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"&gt; &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/span&gt;
  
                              &lt;input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3 col-sm-3 col-xs-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select class="form-control" id="brand" name="brand"&gt;
                          &lt;option value="0"&gt;All Brands&lt;/option&gt;
                          &lt;option value="9618"&gt;Brand 1&lt;/option&gt;
                          &lt;option value="10268"&gt;Brand 2&lt;/option&gt;
                          &lt;option value="10232"&gt;Brand 3&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2 col-sm-3 col-xs-12"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;select class="form-control" id="status" name="status"&gt;
                          &lt;option value="Created"&gt;status 1&lt;/option&gt;
                          &lt;option value="Downloaded"&gt;Status 2&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2 col-sm-12 pull-right"&gt;
                  &lt;input class="hidden" id="search_txt" name="search_txt" type="text" value=""&gt;
                  &lt;input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/isherwood/y97gpyyh/" rel="nofollow">Demo</a></strong></p>
  
  <p>All suggestions are welcome.</p>
  
  <p>Thanks</p>