Can't align buttons with horizontal form (not inline) (Bootstrap) - html

Question

In the code below I have 2 buttons and 3 labeled inputs. I want the buttons aligned with the inputs, but they are aligned with the labels. I tried inline forms, but having the labels on the side won't do.
What's the best option to accomplish this without breaking bootstrap too much?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</script>
<form role="form">
<div class="row">
<div class="form-group col-xs-1">
<button type="button" class="btn btn-success btn-add">+</button>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-2">
<button type="submit" class="btn btn-default">Filter</button>
</div>
</form>

Answer 1

Since you are using bootstrap and you might not want to customize CSS too much unless you really know what you are doing.
Therefore, try to have the same structure then you will get the same result, add <label> </label> to those button as a placeholder, so they will behavior the same as screen changes.
Also add form-control to the submit button and let bootstrap deal with it :D
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
<div class="row">
<div class="form-group col-xs-1">
<label> </label>
<button type="button" class="btn btn-success btn-add">+</button>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-2">
<label> </label>
<button type="button" class="btn btn-default form-control">Filter</button>
</div>
</div>
</form>

Answer 2

Quickest (and not a little dirty) way I can think of doing this to fit with Bootstrap would be to introduce placeholder labels, then hiding them. Note however that this is very fragile as it stands - if the layout is allowed to get too compressed width-wise (or if label text is allowed to wrap), misalignment will still occur:
.invisible-label {
visibility: hidden;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
<div class="row">
<div class="form-group col-xs-1">
<label class="invisible-label"> </label>
<button type="button" class="btn btn-success btn-add">+</button>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-3">
<label>Text Input</label>
<input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group col-xs-2">
<label class="invisible-label"> </label>
<button type="submit" class="btn btn-default">Filter</button>
</div>
</div>
</form>

Answer 3

Applying display:inline-block to the label and the input should allow them to flow onto the same line, but may simply require display:inline