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

User · Answer

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>

User · Answer

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     lt div class  form-group  gt       lt div class  col-xs-10  gt           lt div class  form-inline  gt               lt div class  form-group  gt                   lt label for  birthday  class  col-xs-2 control-label  gt Birthday  lt  label gt               lt  div gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  year   gt               lt  div gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  month   gt               lt  div gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  day   gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

A much simpler solution  without all the inside form-group elements   lt div class  form-group  gt          lt label for  birthday  class  col-xs-2 control-label  gt Birthday lt  label gt          lt div class  col-xs-10  gt              lt div class  form-inline  gt                  lt input type  text  class  form-control  placeholder  year  style  width 70px    gt                  lt input type  text  class  form-control  placeholder  month  style  width 80px    gt                  lt input type  text  class  form-control  placeholder  day  style  width 100px    gt                                      lt  div gt        lt  div gt   lt  div gt        and it will look like this     Cheers

User · Answer

I have created a demo for you   Here is how your nested structure should be in Bootstrap 3    lt div class  form-group  gt       lt label for  birthday  class  col-xs-2 control-label  gt Birthday lt  label gt       lt div class  col-xs-10  gt           lt div class  form-inline  gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  year   gt               lt  div gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  month   gt               lt  div gt               lt div class  form-group  gt                   lt input type  text  class  form-control  placeholder  day   gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

To make it work in Chrome  and bootply  i had to change code in this way    lt form class  form-horizontal  gt     lt div class  form-group  gt       lt label for  name  class  col-xs-2 control-label  gt Name lt  label gt       lt div class  col-xs-10  gt         lt input type  text  class  form-control col-sm-10  name  name  placeholder  name    gt       lt  div gt     lt  div gt      lt div class  form-group  gt       lt label for  birthday  class  col-xs-2 control-label  gt Birthday lt  label gt       lt div class  col-xs-10  gt         lt div class  form-inline  gt           lt input type  text  class  form-control  placeholder  year    gt           lt input type  text  class  form-control  placeholder  month    gt           lt input type  text  class  form-control  placeholder  day    gt         lt  div gt       lt  div gt     lt  div gt   lt  form gt

[html] Inline Form nested within Horizontal Form in Bootstrap 3

Examples related to html

Examples related to css

Examples related to forms

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3