Panque Panque -4 years ago 38
CSS Question

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

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 Source

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>&nbsp;</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>&nbsp;</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>&nbsp;</label>
      <button type="button" class="btn btn-default form-control">Filter</button>
    </div>
  </div>
</form>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download