Label on the left side instead above an input field

Question

I would like to have the labels not above the input field, but on the left side.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

This code gives me:

Code_Result_Bootstrap_3_Label

I would like to have:

Desired_Result_Bootstrap_3_Label

score 107 · Answer 1 · answered Nov 28 '15 at 18:20

107

You can use form-inline class for each form-group :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

answered Nov 28 '15 at 18:20

Martin Cisneros Capistrán

1,902
1
14
11

Thanks. After label I had a div input-group that defaults itself to width:100%. Needed to override that div to 50%. Then the label and input-group (datepicker) would fit in one line. (I wish it was cleaner without override though.) – Turbo Nov 15 '16 at 21:17
2

No, you don't need to override it. Just try grid options, like 'row' and 'col-*'. – gvgramazio Mar 20 '17 at 20:10
1

This should be the accepted answer. This demonstrates that `form-group` can inherit `form-inline` for making individual form groups inline instead of the form's parent class. – cowbert Sep 18 '17 at 18:19
Note: in my case i needed to **put INPUT** into **DIV** – Alexey Nikonov Nov 26 '19 at 15:18

score 58 · Answer 2 · answered Feb 11 '14 at 20:47

58

Put the <label> outside the form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

answered Feb 11 '14 at 20:47

candu

2,827
23
18

funny, this works but bootstrap's documentation doesn't show this. It shows the label in the form group – steveareeno Feb 27 '20 at 15:46

score 14 · Answer 3 · answered Aug 30 '13 at 18:05

The Bootstrap 3 documentation talks about this in the CSS documentation tab in the section labelled "Requires custom widths", which states:

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

If you use your browser and Firebug or Chrome tools to suppress or reduce the "width" style, you should see things line up they way you want. Clearly you can then create the appropriate CSS to fix the issue.

However, I find it odd that I need to do this at all. I couldn't help but feel this manipulation was both annoying and in the long term, error prone. Ultimately, I used a dummy class and some JS to globally shim all my inline inputs. It was small number of cases, so not much of a concern.

Nonetheless, I too would love to hear from someone who has the "right" solution, and could eliminate my shim/hack.

Hope this helps, and props to you for not blowing a gasket at all the people that ignored your request as a Bootstrap 3 concern.

how about, say, making the width of labels col-sm-2 - and inputs col-sm-10? — niico, Sep 13 '16 at 00:00

score 14 · Answer 4 · answered Dec 01 '15 at 05:40

You can create such form where label and form control are side using two method -

1. Inline form layout

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Horizontal Form Layout

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

You can check out this page for more information and live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Solution 1 does not work for me. Label still above input control. candu's solution does what I want, but is it the correct way? — Kit Fisto, Feb 17 '17 at 15:36

score 8 · Answer 5 · answered Aug 23 '13 at 13:37

8

Like this

DEMO

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

answered Aug 23 '13 at 13:37

Falguni Panchal

8,873
3
27
33

4

This is the solution for Bootstrap v2.1.0, but not for Bootstrap v3.0.0 – Stefan Vogt Aug 23 '13 at 15:33
3

"form-inline" exists in Bootstrap 3 as well, and I think that is the key: +1 – Per Quested Aronsson Mar 21 '15 at 18:40

score 8 · Answer 6 · answered Dec 04 '13 at 11:15

I had the same problem, here is my solution:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

here is the Demo

score 5 · Answer 7 · answered Jan 27 '15 at 14:15

You can see from the existing answers that Bootstrap's terminology is confusing. If you look at the bootstrap documentation, you see that the class form-horizontal is actually for a form with fields below each other, i.e. what most people would think of as a vertical form. The correct class for a form going across the page is form-inline. They probably introduced the term inline because they had already misused the term horizontal.

You see from some of the answers here that some people are using both of these classes in one form! Others think that they need form-horizontal when they actually want form-inline.

I suggest to do it exactly as described in the Bootstrap documentation:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Which produces:

enter image description here

Copy & pasting your code, I get the name label above the text input with Bootstrap 3.3.4. — Mike Covington, May 17 '15 at 19:32

score 4 · Answer 8 · answered Aug 23 '13 at 13:31

You must float left all elements like so:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

give some margin to the desired elements :

 .form-group { margin-right:5px }

and set the label the same line height as the height of the fields:

.form-group label { line-height:--px; }

score 3 · Answer 9 · answered May 11 '17 at 15:48

3

You can use a span tag inside the label

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

answered May 11 '17 at 15:48

Vinorth

968
8
13

BeeTee2 · Answer 10 · 2015-04-08T21:31:01.397

I think this is what you want, from the bootstrap documentation "Horizontal form 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. Doing so changes .form-groups to behave as grid rows, so no need for .row". So:

<form class="form-horizontal" role="form">
<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>

Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/

score 1 · Answer 11 · answered Jan 06 '14 at 11:58

1

I managed to fix my issue with. Seems to work fine and means I dont have to add widths to all my inputs manually.

.form-inline .form-group input {
 width: auto; 
}

answered Jan 06 '14 at 11:58

Tom C

822
7
27

This is not how you're supposed to use bootstrap. I suggest you to use classes built for your need instead that modify existing ones. – gvgramazio Mar 20 '17 at 20:08
Yeah I agree, I wrote this when I was new to the whole Bootstrap scene. – Tom C May 20 '17 at 20:09

score 1 · Answer 12 · answered Feb 26 '14 at 12:01

I am sure you would've already found your answer... here is the solution I derived at.

That's my CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

And my HTML...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

You can see the working example here... http://jsfiddle.net/s6Ujm/

PS: I am a beginner too, pro designers... feel free share your reviews.

score 1 · Answer 13 · answered Aug 29 '19 at 14:59

No CSS required. This should look fine on your page. You can set col-md-* as per your needs

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>

This does not work when I switch to bootstrap 5.3 (https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css). I'd really appreciate code that works with this version. — mherzog, Jul 09 '23 at 17:21

score 0 · Answer 14 · answered Aug 23 '13 at 13:43

0

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Also we can use it Simply as

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

answered Aug 23 '13 at 13:43

user2349320

11

2

class="control-group" does not exist in Boostrap V3 – Stefan Vogt Aug 23 '13 at 15:40

score 0 · Answer 15 · answered Oct 31 '13 at 19:47

0

It seems adding style="width:inherit;" to the inputs works fine. jsfiddle demo

answered Oct 31 '13 at 19:47

Bushibytes

601
5
5

Label on the left side instead above an input field

15 Answers15

Linked