Bootstrap 3 : Label on top on field and submit button in a form inline

Question

I'm trying to align 3 selects menus and a submit button with bootstrap 3.

I've try with rows and inline attribut like this but it doesn't works :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="date_deb">Date D&eacute;but</label>
      <select name="date_deb" id="date_deb" class="form-control">
        <option value="07/11/2012">07/11/2012</option>
        <option value="30/09/2012">30/09/2012</option>
      </select>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="date_deb">Date D&eacute;but</label>
      <select name="date_deb" id="date_deb" class="form-control">
        <option value="07/11/2012">07/11/2012</option>
        <option value="30/09/2012">30/09/2012</option>
      </select>
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label" for="date_deb">Date D&eacute;but</label>
      <select name="date_deb" id="date_deb" class="form-control">
        <option value="07/11/2012">07/11/2012</option>
        <option value="30/09/2012">30/09/2012</option>
      </select>
    </div>
  </div>
  <div class="col-md-3">
    <br/>
    <button type="submit" class="btn btn-success" id="date_search">Rechercher</button>
  </div>
</div>

and this other solution with inline class :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
   <div class="col-lg-12">
      <form class="form-inline" role="form" method="post">
          <div class="form-group">
              <label class="control-label" for="date_deb">Date D&eacute;but</label>
              <select name="date_deb" id="date_deb" class="form-control">
                <option value="07/11/2012">07/11/2012</option>
                <option value="30/09/2012">30/09/2012</option>          
              </select>
          </div>

          <div class="form-group">
              <label for="date_fin">Date Fin</label>
              <select name="date_fin" id="date_fin" class="form-control">
                  <option value="07/11/2012">07/11/2012</option>
                  <option value="30/09/2012">30/09/2012</option>                
              </select>
           </div>

          <div class="form-group">
            <label for="date_ref">Date R&eacute;f&eacute;rence</label>
             <select name="date_ref" id="date_ref" class="form-control">
                <option value="07/11/2012">07/11/2012</option>
                <option value="30/09/2012">30/09/2012</option>          
            </select>
          </div>

          <div class="form-group">
            <br/>
            <button type="submit" class="btn btn-success" id="date_search">Rechercher</button>
          </div>
        </form>
    </div>
</div>

But form button still not align with selects menus. See below :
_{(source: free.fr)}

Solution

You will probably need to use some css in order to align your button with the select dropdowns

.row .btn {
    margin-top: 5px;
}

http://www.bootply.com/93481

Comments

[Trevor]

@Portekoi please mark this answer as accepted if it answered your question, otherwise give feedback on what is not resolved. Thanks

[Portekoi]

For me, it's not normal to make a correction like that but it's fix my issu so, it's ok. Thanks for your reply Trevor.