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.

Answer 1

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