Bootstrap 3.0: How to have text and input on same line?

Question

I\'m currently switching my website over to Bootstrap 3.0. I\'m having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.

Answer 1

Straight from documentation http://getbootstrap.com/css/#forms-horizontal.

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

Sample:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Answer 2

all please check the updated code as we have to use

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

thanks with regards

Answer 3

I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.

Answer 4

The way I solved it was simply to add an override for all my textboxes on the main css of my site, as so:

.form-control {
    display:initial !important;
}

Answer 5

What you need is the .form-inline class. You need to be careful though, with the new .form.inline class you have to specify the width for each control.

Take a look at this

Answer 6

None of these worked for me, had to use .form-control-static class.

http://getbootstrap.com/css/#forms-controls-static