title: bootstrap date picker position
body: <p>I am using following sample code for date picker</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!--  jQuery --&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap --&gt;
  &lt;link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /&gt;
  
  &lt;!-- Bootstrap Date-Picker Plugin --&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bootstrap-iso"&gt;
      &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
  
      &lt;!-- Form code begins --&gt;
      &lt;form method="post"&gt;
          &lt;div class="form-group"&gt; &lt;!-- Date input 1--&gt;
              &lt;label class="control-label" for="date"&gt;Start Date&lt;/label&gt;
              &lt;input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt; &lt;!-- Date input 2--&gt;
              &lt;label class="control-label" for="date"&gt;End Date&lt;/label&gt;
              &lt;input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt; &lt;!-- Submit button --&gt;
              &lt;button class="btn btn-primary " name="submit" type="submit"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
   &lt;!-- Form code ends --&gt; 
      &lt;/div&gt;
      &lt;/div&gt;    
      &lt;/div&gt;
      &lt;script&gt;
          $(document).ready(function(){
              var date_input=$('input[name="date"]'); //our date input has the name "date"
              var date_input1=$('input[name="date1"]'); //our date input has the name "date"
              var container=$('.bootstrap-iso form').length&gt;0 ? $('.bootstrap-iso form').parent() : "body";
              var options={
                  format: 'mm/dd/yyyy',
                  container: container,
                  todayHighlight: true,
                  autoclose: true,
              };
              date_input.datepicker(options);
              date_input1.datepicker(options);
          })
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>The date picker for <code>Start Date</code> opens in correct position but for <code>End Date</code> the date picker open above the field. I want to open it below similar to first case. I guess the problem is with javascript and javascript is new new thing for me. How can I correct mistake?</p>