LuboŇ° Suk LuboŇ° Suk - 2 months ago 10
CSS Question

Is it possible to align inputs/labels in multiple inline forms?

I am using Bootstrap 3 and I stuck on some form formatting.

E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)

If you look at this fiddle example you can see, that I almost achieved this by setting

col-xs-6
to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).

So is there any way to align this form elements instead of this?

<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>

<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>

<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>

Answer

Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)

.form-group > label {
  display: inline-block;
  vertical-align: middle;
  width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Results per page</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Keyword weight</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Results per page</label>
    <input type="text" class="form-control" id="exampleInputName2">
    <button type="submit" class="btn btn-default">Save</button>
  </div>
</form>