Inline Form nested within Horizontal Form in Bootstrap 3

Question

I want to build a form in Bootstrap 3 like this:

My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.

I cannot find any doc about this type of form on getbootstrap.com.

Could anyone tell me how to do this? Only 'Username' would be OK.

Thanks.

PS There is a similar question but it's using Bootstrap 2.3.2.

Shimmy Weitzhandler · Accepted Answer · 2015-09-22 00:51:14Z

151

I have created a demo for you.

Here is how your nested structure should be in Bootstrap 3:

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.

Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}

edited Sep 22, 2015 at 0:51

Shimmy Weitzhandler

105k126 gold badges437 silver badges645 bronze badges

answered Aug 25, 2013 at 13:36

edsioufi

8,3553 gold badges38 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ruslan Stelmachenko Over a year ago

I don't know why (maybe something broken in last bootstrap.css) but in your demo fields year, month and day placed not inline but each on another row.

Ruslan Stelmachenko Over a year ago

Oh it is because small width of screen on jsfiddle. Adding class col-xs-3 to <div class="form-group"> solved the problem.

Isaac Betesh Over a year ago

Why do you use <div class="form-group"> within the form-inline anyway? I'm not using it, and the margins work themselves out without any custom CSS. Am I missing something?

edsioufi Over a year ago

@IsaacBetesh this is a requirement of Bootstrap to avoid problems that can occur when using an input-group within the form-inline (for more info see my answer to this question)

s29 Over a year ago

This structure doesn't seem to provide any control over nested field widths?

|

Dan · Accepted Answer · 2014-04-29 23:08:05Z

16

Another option is to put all of the fields that you want on a single line within a single form-group.

See demo here

<form class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
        </div>
    </div>

    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>
</form>

edited Apr 29, 2014 at 23:08

answered Apr 29, 2014 at 20:56

Dan

9,4885 gold badges44 silver badges76 bronze badges

2 Comments

Abdulla Nilam Over a year ago

Helped me some how. +1

matthias Over a year ago

This option works well as long as you put fields into a form group which actually belong to the it. Think of additional has_error classes which must be applied at the same node as form-group. When you mix different fields and labels within a form group this bootstrap semantic would break.

dbinott · Accepted Answer · 2015-07-13 18:31:17Z

This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.

<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1" for="inputEmail1">Email</label>
        <div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1" for="inputPassword1">Password</label>
        <div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12" for="TextArea">Textarea</label>
        <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
        <div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
        <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12">Phone number</label>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1">Options</label>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-info pull-right">Submit</button>
        </div>
    </div>
</form>
<hr>
</div>

Mark Schultheiss · Accepted Answer · 2017-02-22 19:06:51Z

4

To make it work in Chrome (and bootply) i had to change code in this way:

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="year" />
        <input type="text" class="form-control" placeholder="month" />
        <input type="text" class="form-control" placeholder="day" />
      </div>
    </div>
  </div>
</form>

edited Feb 22, 2017 at 19:06

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

answered Nov 17, 2014 at 10:26

Max Bertoli

6245 silver badges26 bronze badges

2 Comments

reformed Over a year ago

This contains broken/invalid HTML.

Mischa Over a year ago

@JimmyObonyoAbor I am a bit late to the party... But you were too, back in 2016... When reformed said the html is invalid it actually was invalid... it got fixed not even a month before your comment

Anjana Silva · Accepted Answer · 2020-05-04 14:31:39Z

1

A much simpler solution, without all the inside form-group elements

<div class="form-group">
       <label for="birthday" class="col-xs-2 control-label">Birthday</label>
       <div class="col-xs-10">
           <div class="form-inline">
               <input type="text" class="form-control" placeholder="year" style="width:70px;"/>
               <input type="text" class="form-control" placeholder="month" style="width:80px;"/>
               <input type="text" class="form-control" placeholder="day" style="width:100px;"/>                        
           </div>
     </div>
</div>

... and it will look like this,

Cheers!

answered May 4, 2020 at 14:31

Anjana Silva

9,3514 gold badges57 silver badges59 bronze badges

Comments

theCauldronQueen · Accepted Answer · 2014-08-19 04:27:55Z

I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..

<div class="form-group">
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <label for="birthday" class="col-xs-2 control-label">Birthday:</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

Inline Form nested within Horizontal Form in Bootstrap 3

6 Answers 6

6 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related