Bootstrap button is not on the same row with text input in horizontal form

Question

I'm trying to positionate text input and button on the same row/line, but the button somehow goes up, see the screenshot.

Code:

<div class="row">
        <div class="col-md-8" ng-controller="OrdersController">
          <div class="well">
            <form role="form" class="form-horizontal">

              <div class="row">
                <div class="col-lg-8">
                  <label>Name</label>
                  <input type="text" class="form-control" placeholder="Enter patient">
                </div>
                <div class="col-lg-3">
                  <button type="button" class="btn btn-primary">Create new</button>
                </div>
              </div>

              <hr>
                <label>Private notes</label>
                <textarea  class="form-control" rows="3" placeholder="These notes are for your reference only."></textarea>

                <hr>
              <div class="col-md-4">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="submit" class="btn btn-primary">Open</button>
              </div>

            </form>
          </div>
        </div>
    </div>

Also you can check out demo on plunker
So, how place them on the same line ?

shan · Accepted Answer · 2014-04-25 07:50:57Z

2

You can achieve this also by targeting that particular div and you set top margin to align it with the other elements.

html

<button type="button" class="btn btn-primary inline-button">Create new</button>

CSS

    @media(min-width 768px){
  .inline-button{
    margin-top:24px;
  }
}

answered Apr 25, 2014 at 7:50

shan

782 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mini John · Accepted Answer · 2014-04-25 07:35:45Z

0

Add .form-inline to your <form> for left-aligned and inline-block controls.

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="">Email address</label>
    <input type="email" class="form-control" id="" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

See -> http://getbootstrap.com/css/#forms-inline

edited Apr 25, 2014 at 7:35

answered Apr 25, 2014 at 7:30

Mini John

7,97110 gold badges63 silver badges111 bronze badges

Collectives™ on Stack Overflow

Bootstrap button is not on the same row with text input in horizontal form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related