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.

How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.

How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.

JS fiddle example

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Update: I change the code to this which works but having trouble with alignment now. Any ideas?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

They are both the same you have just have an extra class `form-control` on your bootstrap 3 example. — Kyle Needham, Aug 28 '13 at 22:21
Have a look at the example in the bootstrap docs. You are missing classes on the label http://getbootstrap.com/css/#forms-horizontal — bumperbox, Aug 28 '13 at 22:29
I'm sorry but I'm still confused. The lower example (BS3) has the 'form-control' class which give is a better look. I want the better look AND keep the text and input on same line. What am I missing? — fat fantasma, Aug 28 '13 at 23:04
Let me ask the question a different way. How would I get the text and input fields on the same line and aligned in nice columns? See this fiddle http://jsfiddle.net/fatfantasma/QwkpE/. Of course, I would like to add text to the far right on the same line. How would I do that? — fat fantasma, Aug 29 '13 at 00:12
`.input-lg` increases height of the input field, but we need a class to adjust the label height and size as well. — Petrus Theron, Sep 16 '13 at 11:30

score 147 · Answer 1 · edited Sep 28 '15 at 15:07

147

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>

edited Sep 28 '15 at 15:07

naXa stands with Ukraine

35,493
19
190
259

answered Oct 28 '13 at 13:07

Denis Besic

3,067
3
24
35

15

+1. This should be the accepted answer, since it links the official documentation – EProgrammerNotFound Nov 06 '14 at 12:34
it's a link only answer, and should not be the accepted one without an example, in case the referenced page changes or is removed. – NDM Sep 04 '15 at 14:23
why the correct answer is the correct answer? this should be the correct answer! @fat fantasma – Maduro Nov 11 '15 at 16:46
Should wrap these in a form-control-static, see answers below – rmcsharry Jan 23 '16 at 14:03
Did u try that on IE ? i'm facing this problem and can't be solved with forms-horizontal. – Hany Hassan Jan 25 '16 at 06:46
2

@Whitecat that is by design on a responsive layout - to get that to work also on mobile use col-xs-* rather than col-sm-* – niico Mar 18 '16 at 18:26
This seems to be completely broken in BS 3.3.7. If you want horizontal alignment on xs scale layout, and replace all col-sm-* attributes with corresponding xs ones. Then what happens is that when the viewport is sm or larger everything works fine, but when viewport reaches xs size the labels lose all styling they inherit from form-horizontal or form-control and become aligned to the top left of their grid. Here's a Plunk to demonstrate https://plnkr.co/edit/GR9SZ2z2mi2M57Qd3147?p=preview – Neutrino Jun 15 '17 at 13:48
Replacing 'control-label' with 'form-control-static text-right' label style works, but is a long way from what the BS documentation says. – Neutrino Jun 15 '17 at 14:01
4.0 is a bit different. it uses .row: https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form – tibi Feb 23 '18 at 13:26

score 43 · Accepted Answer · answered Aug 29 '13 at 02:44

43

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.

answered Aug 29 '13 at 02:44

lomteslie

639
7
9

score 28 · Answer 3 · answered Sep 09 '13 at 18:09

28

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

answered Sep 09 '13 at 18:09

Reza Shirazian

2,303
1
22
30

this should be better answer than class `form-horizontal` because it didn't force div with class `form-group` shows in block. – shawnzhu Apr 22 '15 at 17:35
This only applies to forms within viewports that are at least 768px wide. – rmcsharry Jan 23 '16 at 14:01

score 13 · Answer 4 · answered Jun 15 '15 at 06:12

13

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

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

answered Jun 15 '15 at 06:12

hakunin

4,041
6
40
57

1

This really helped. Without this, the label text and the input text were not aligned with col-*-* – Brendan Cody-Kenny Nov 04 '15 at 02:33
This should be the correct answer, especially if you want your form to wrap correctly on smaller devices – rmcsharry Jan 23 '16 at 14:02
Yup this works for me too. Other solutions fail for col-xs-* columns. Using 'form-control-static text-right' worked for me on BS 3.3.7. – Neutrino Jun 15 '17 at 14:00

score 10 · Answer 5 · answered Mar 06 '14 at 15:03

You can do it like this:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Fiddle

score 4 · Answer 6 · edited May 25 '18 at 04:44

just give mother of div "class="col-lg-12""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

it will be

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

score 3 · Answer 7 · answered May 23 '16 at 10:46

3

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;
}

answered May 23 '16 at 10:46

Hugo Nava Kopp

2,906
2
23
41

3

What does this do? – AgilePro Jun 12 '18 at 04:56

score 2 · Answer 8 · answered Nov 03 '19 at 07:44

2

In Bootstrap 4 for Horizontal element you can use .row with .col-*-* classes to specify the width of your labels and controls. see this link.

And if you want to display a series of labels, form controls, and buttons on a single horizontal row you can use .form-inline for more info this link

answered Nov 03 '19 at 07:44

Shojaeddin

1,851
1
18
16

The question specifically states Bootstrap 3. – blupointmedia Dec 20 '19 at 21:33
1

I had same issues with bootstrap 4, and I posted it to help someone else – Shojaeddin Dec 21 '19 at 11:17

score 1 · Answer 9 · answered Aug 27 '15 at 07:16

1

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

answered Aug 27 '15 at 07:16

Tushar Dhingra

27
1

score -2 · Answer 10 · edited May 23 '17 at 12:34

Or you can do this:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

I tried every one of the suggestions above and none of them worked. I don't want to pick a fixed number of columns in the 12 column grid. I want the prompt, and the input right after it, and I want the columns to stretch as needed.

Yes, I know, that is against what bootstrap is all about. And you should NEVER use a table. Because DIV is so much better than tables. But the problem is that tables, rows, and cells actually WORK.

YES - I REALLY DO know that there are CSS zealots, and the knee-jerk reaction is never never never use TABLE, TR, and TD. Yes, I do know that DIV class="table" with DIV class="row" and DIV class="cell" is much much better. Except when it doesn't work, and there are many cases. I don't believe that people should blindly ignore those situations. There are times that the TABLE/TR/TD will work just fine, and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant. A developer should understand what the benefits of the various approaches are, and the tradeoffs, and there is no absolute rule that DIVs are better.

"Case in point - based on this discussion I converted a few existing tds and trs to divs. 45 minutes messing about with it trying to get everything to line up next to each other and I gave up. TDs back in 10 seconds later - works - straight away - on all browsers, nothing more to do. Please try to make me understand - what possible justification do you have for wanting me to do it any other way!" See [https://stackoverflow.com/a/4278073/1758051]

And this: "

Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail"." [https://stackoverflow.com/a/4964107/1758051]

I have yet to see a way to force DIVs to always line up in a column in all situations. I keep getting shown trivial examples that don't really run into the problems. "Responsive" is about providing a way that they will not always line up in a column. However, if you really want a column, you can waste hours trying to get DIV to work. Sometimes, you need to use appropriate technology no matter what the zealots say.

Everyone knows that tables do not reformat themselves into not-tables. But if what you need is a row that ALWAYS remains a row. You simpley can not enforce this with DIV tags. People act like you always want responsiveness, but what you are doing it confusing "most of the time" with "all of the time". At the time of writing, this answer has two down votes. If you agree with my point here, that sometimes you just need a TR then let others know as well. — AgilePro, Jan 28 '17 at 01:42
You have the right to your own opinion, but I think the general consensus is that you should never use tables for anything other that show tabular data. Tables are just too limited on what they can do and how customizable they are. If you still need to give divs the ability to flow like table rows and columns, take a look at flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Pedro Moreira, Jan 28 '17 at 15:30

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

10 Answers10

Linked