Vertical Align Bootstrap

Question

I am trying align inline form vertically, however, I'm unable to do so. Below is my code using Bootstrap. Can you please help?

This is not a duplicate question. I have reviewed 10 other questions here already before finally posting my own here.

<div class="row">
    <div class="col-md-12">
        <form>
            <div class="form-group">
                <label class="control-label">Label</label>
                <input type="text" class="form-control" />
                <button class="btn btn-default" type="button">Button</button>
            </div>
        </form>
    </div>
</div>

Tried that. Not working. Below is updated code:-

<div class="row">
    <div class="col-md-12">
        <form class="form-inline">
            <input type="text" class="form-control" />
            <button class="btn btn-default" type="button">Button</button>
        </form>
    </div>
</div>

Below is the snapshot.. how the input box sticks on top:

that is working check out the snippet – neophyte Feb 01 '17 at 18:00 — neophyte, Feb 01 '17 at 18:00
What is wrong with my code. It really isn't working. – Bharat Nanwani Feb 01 '17 at 18:02 — Bharat Nanwani, Feb 01 '17 at 18:02
must be some other element pushing it. – neophyte Feb 01 '17 at 18:07 — neophyte, Feb 01 '17 at 18:07

neophyte · Answer 1 · 2017-02-01T18:04:46.363

Just add class="form-inline" to form tag

<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>

    <body>
      
      <div class="container-fluid">
        <div class="row">
     <div class="col-md-12 col-sm-12 col-xs-12">
     
        <form  class="form-inline">
            <div class="form-group">
           
            
                <label class="control-label">Label</label>
              
              
                <input type="text" class="form-control" >
                
                <button class="btn btn-default" type="button">Button</button>
                </div>
                
            
        </form>
   
</div>
        </div>
        </div>
</body>
  </html>

Not working. Tried that. The Txt Box still sticks on top instead of being in center like how the button is aligned in center. — Bharat Nanwani, Feb 01 '17 at 18:00

Vertical Align Bootstrap

1 Answers1