17

I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?

    <div class="controls-row">
        <div class="control-group">
            <label class="control-label" for="my-number">ALabel</label>

            <div class="controls">
                <input id="my-number" type="number"/>
            </div>
        </div>
    </div>

The fiddle is at http://jsfiddle.net/7VmR9/

madth3
  • 7,275
  • 12
  • 50
  • 74
Jeff Storey
  • 56,312
  • 72
  • 233
  • 406
  • 1
    I responded here: http://stackoverflow.com/questions/18404003/label-on-the-left-side-instead-above-an-input-field/33974788 regards! – Martin Cisneros Capistrán Nov 28 '15 at 18:22
  • Possible duplicate of [Label on the left side instead above an input field](https://stackoverflow.com/questions/18404003/label-on-the-left-side-instead-above-an-input-field) – Hypenate Mar 08 '19 at 09:46

4 Answers4

16

Yes, you can do this by bootstrap column structure.

<div class="form-group">
  <label for="name" class="col-lg-4">Name:</label>
    <div class="col-lg-8">
      <input type="text" class="form-control" name="name" id="name">
    </div>
</div>

Here is a Bootply Demo

Dhaval Ptl
  • 494
  • 1
  • 5
  • 18
  • One thing to note about this technique is that col-* is defined as float: left which will cause the inner div to break out of the form-group div. To account for this, you can use overflow: hidden on the form-group. I would recommend creating a semantic container like so: .col-container { overflow: hidden; } – Derek Greer Feb 20 '15 at 22:46
  • demo didn't load for me – egmfrs Jun 12 '19 at 11:20
6

The div is a block element, that means it will take as much width as it can and the input element is in it.

If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.

Brane
  • 3,257
  • 2
  • 42
  • 53
zoran404
  • 1,682
  • 2
  • 20
  • 37
  • Making it inline seems to work. I'm going to hold off on accepting quite yet to see if there's a built-in way to do this with bootstrap constructs. – Jeff Storey Jul 12 '13 at 21:32
  • If there is an way to do this in bootstrap then it is probably isn't simple as those 2 solutions. And @wikijames suggested to float the label, first generally would avoid floating elements and second just floating the label probably wont work if you don't float the div too. – zoran404 Jul 12 '13 at 21:39
2
<form class="form-inline">
    <div class="form-group">
        <label for="my-number">ALabel</label>
        <input type="number" id="my-number" class="form-control">
    </div>
</form>

Source: https://getbootstrap.com/docs/3.3/css/#forms-inline

Marco Lackovic
  • 6,077
  • 7
  • 55
  • 56
  • 1
    This no longer works with bootstrap 5. See https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form – Aileron79 Aug 16 '22 at 11:19
1

You can take help directly from website they provided, well documented.

Here is a link to a Fiddle with Bootstrap css.

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email"/>
    </div>
</div>
isedwards
  • 2,429
  • 21
  • 29
  • I don't want to put it in a form-horizontal class if I can avoid it. It's not actually in a form as described in the question. Putting it in form-horizontal adds a large left side offset. Using your fiddle as an example, I'd like to move the form fields and labels all the way to the left side of the window. – Jeff Storey Jul 12 '13 at 23:18
  • You don't have to remove .form-horizontal class. Dive into the code and make two small changes. .form-horizontal .control-label(Remove width) and then change value of(Margin-left) in "form-horizontal .controls". In line number 1962, 1969 on bootstrap css file you can find it. –  Jul 16 '13 at 09:11