Tiaw Tiaw - 4 months ago 28
CSS Question

how to align input with the last label line with bootstrap

I've made a bootstrap form, and i want align my input with the last text line of his refferencial label:

this is my code:



<div class="form-group">
<label class="col-sm-2 control-label">Date de début des soins:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Product name">
</div>
<div class="col-sm-1">
</div>
<label class="col-sm-2 control-label">Durée des soins:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Product name">
</div>
<div class="col-sm-1">
</div>
</div>





https://jsfiddle.net/Tibuakaw/q945k4eg/

how to fix it ?

enter image description here

Answer

For those looking for the answer to this:

You can do it with vertical-align: baseline The label needs to be wrapped in an inline-block element and the line-height needs to be set on the outer container. In the sample below, the first one is using divs, the second is using a table.

.row {
  vertical-align: baseline;
}

.label {
  display: inline-block;
}


/* For demonstration purposes */

.label {
  width: 100px;
}
<div class="row" style="white-space: nowrap;">
  <span class="label" style="white-space: normal;">Date de début des soins:</span>
  <input type="text" class="form-control" placeholder="Product name">
</div>
<div class="row" style="white-space: nowrap;">
  <span class="label" style="white-space: normal;">Durée des soins:</span>
  <input type="text" class="form-control" placeholder="Product name">
</div>
<hr>
<table>
  <tr class="row">
    <td>
      <span class="label">Date de début des soins:</span>
    </td>
    <td>
      <input type="text" class="form-control" placeholder="Product name">
    </td>
  </tr>
  <tr class="row">
    <td><span class="label">Durée des soins:</span></td>
    <td>
      <input type="text" class="form-control" placeholder="Product name">
    </td>
  </tr>
</table>

https://jsfiddle.net/v9x3wote/