hello hello - 4 days ago 6
CSS Question

Align button with input forms with labels

I'm trying to align a button element with two other input elements with labels. Using the bootstrap snippet below:

<div class="row centered-form center-block ">
<div class="container col-md-6 col-md-offset-3">
<form action="/result" class="form-inline" method="get" role="form">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label" for="County">Prop1, Prop2</label>
<input class="form-control" name="County" type="text" />
</div>
<div class="form-group col-md-4">
<label class="control-label" for="Type">Type of Election</label>
<select class="form-control" name="Type"><option value=""></option>
<option value="1">President</option>
</select>
</div>
<button class="btn btn-primary col-md-2" type="submit">Submit</button>
</div>
</form>
</div>
</div>


The image I'm getting looks like this:

enter image description here

If I remove labels from the two from inputs, I get:

enter image description here

How can I leave labels on the form inputs and still align them with the button?

JSFiddle

Answer

I believe button classes don't work that way.

Updated: This is silly but it works. And if it works, don't mess with it!

<div class="form-group col-md-2">
    <label class="control-label" for="btn"></label>
    <button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button>
</div>
Comments