Select control and Bootstrap grid

Question

I'm getting a strange issue with bootstrap grid. This is the first time I have this problem, and can't find something releavant on Internet. I have a form with Label and their Select control, each on a col-md-3 div. The problem i have is that the 4 firsts controls are ok, but the fifth is alignd to the right of the screen, and all the others are ok.... Here's my code and a screenshot :

<div class="form-group col-md-3">
      <label class="control-label" for="select-1">Vérification de l'état</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-1">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label class="control-label" for="select-2">Nettoyage corps de chauffe</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-2">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label class="control-label" for="select-3">Démontage et nettoyage du brûleur</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-3">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label class="control-label" for="select-4">Nettoyage préfiltre (le cas échéant)</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-4">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label class="control-label" for="select-5">Nettoyage du filtre de la pompe</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-5">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label class="control-label" for="select-6">Verification des dispositifs de sécurité</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-6">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label class="control-label" for="select-7">Verification du circulateur de chauffage</label>
    </div>
    <div class="form-group col-md-3">
      <select name="select-7">
        <option value="no" selected>Sans objet</option>
        <option value="valid">Validé</option>
        <option value="notvalid">Non validé</option>
      </select>
    </div>

Screenshot : http://prntscr.com/d21j33

Answer 1

Bootstrap isn't supposed to align the overflow of grid (over 12 units) as you want.

Instead use rows to separate each 12 grid units in a line.

I updated your code https://jsfiddle.net/mydkahdf/1/

<div class="row">
  <div class="form-group col-md-3">
    <label class="control-label" for="select-1">Vérification de l'état</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-1">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="select-2">Nettoyage corps de chauffe</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-2">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="form-group col-md-3">
    <label class="control-label" for="select-3">Démontage et nettoyage du brûleur</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-3">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="select-4">Nettoyage préfiltre (le cas échéant)</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-4">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="form-group col-md-3">
    <label class="control-label" for="select-5">Nettoyage du filtre de la pompe</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-5">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="select-6">Verification des dispositifs de sécurité</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-6">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="form-group col-md-3">
    <label class="control-label" for="select-7">Verification du circulateur de chauffage</label>
  </div>
  <div class="form-group col-md-3">
    <select name="select-7">
      <option value="no" selected>Sans objet</option>
      <option value="valid">Validé</option>
      <option value="notvalid">Non validé</option>
    </select>
  </div>
</div>