Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align button with input forms with labels

Tags:

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


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!