CODEWITHSUNDEEP
formstwitter-bootstrapalignment
Doug Johnson
Doug Johnson

Reputation: 560

How do I force an input to stay on the same line as its label with Bootstrap form-control class?

I'm trying to force a <label/> and its <input/> to stay on the same line.

I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.

  <div>
    <label class="form-label">Search</label>
    <input type="text" class="form-control">
  </div>

I want this:

Search [______________________]

I get this:

Search

[_____________________]

How do I force them to stay on the same line?

http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview

Upvotes: 2

Views: 5160

Answers (1)

Aibrean
Aibrean

Reputation: 6412

What you are looking for is referred by Bootstrap as an inline form or horizontal form.

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="form-label">Search</label>
    <input type="text" class="form-control">
  </div>
 </form>

Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Search</label>
     <div class="col-sm-10">
       <input type="text" class="form-control">
    </div>
  </div>
 </form>

When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.

Upvotes: 8

Related Questions