Form Inline Inside a Form Horizontal in Twitter Bootstrap

Form inline inside a form horizontal in twitter bootstrap?

Don't nest <form> tags, that will not work. Just use Bootstrap classes.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

You can achieve that behaviour in many ways, that's just an example. Test it on this bootply

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Note that I'm using .form-inline to get the propper styling inside a .controls.

You can test it on this jsfiddle

Twitter bootstrap mix horizontal form with inline

If you want to keep both within the same form element you can add form-inline to your fieldset:

<form>
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">A</label>
        <input type="text" class="input-medium">
    </fieldset>
</div><!-- end row -->
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">B</label>
        <input type="text" class="input-mini" >
        <label class="control-label">C</label>
        <input type="text" class="input-mini" >
        <label class="control-label">D</label>
        <input type="text" class="input-mini" >
        <label class="control-label">E</label>
        <input type="text" class="input-mini" >
    </fieldset>
</div><!-- end row -->
</form>

http://jsfiddle.net/ZWNjw/

Horizontal form form-inline in bootstrap

Consult the Bootstrap documentation on inline forms.

<form class="form-inline">
  <div class="form-group">
    Have a
    <select class="form-control"><option>Break</option></select>
    Have a
    <select class="form-control"><option>Kit kat</option></select>
  </div>
  <button type="submit" class="btn btn-default">Go</button>
</form>

Example Bootstrap fiddle

Normal (vertical) form inside form-horizontal with Twitter Bootstrap

Boostrap can't do this by default, but I've included this in my fork https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

Please consider using Jasny's extensions to Bootstrap http://jasny.github.com/bootstrap

or just use this CSS

.form-vertical .form-horizontal .control-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
}
.form-horizontal .form-vertical .controls {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.control-group .control-group {
  margin-bottom: 0;
}

With the HTML

<form class="form-horizonal">
    # Horizal controls here

    <div class="form-vertical">
        <div class="control-group">
            <label class="control-label">Label</label>
            <div class="controls">Something here</div>
        </div>
    </div>
</form>

bootstrap form group, mixed inline and horizontal style

You can use columns as well, here's the html code:

<div class="row">
    <div class="container">
        <form action="" class="form-horizontal">
            <div class="form-group row">
                <div class="form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="fname">First Name:</label>
                    <input type="text" class="form-control" name="fname" id="fname" value="">
                </div>
                <div class="form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="lname">Last Name:</label>
                    <input type="text" class="form-control" name="lname" id="name" value="">
                </div>
            </div>
            <div class="form-inline col-md-12 col-md-12 col-sm-12 col-xs-12">
                <label for="email">Email:</label>
                <input class="form-control" type="text" name="email" id="email" value="">
            </div>
        </form>
    </div>

And the css code is : (maybe there's some extra properties though that are not necessary) :

.row{
    display:block;
}
.form-inline{
        white-space:nowrap;
}
input{
    width:30% !important;
    display:inline-block;
}
label{
    display:inline-block;
    float:left;
}

Here's a jsfiddle link : Demo

Put inline element on horizontal form

You can use an input group with an .input-group-addon to do this.

<div class="col-xs-9">
  <div class="input-group">
     <input id="data" type="text" class="form-control" />
     <div class="input-group-addon">next text</div>
   </div>
</div>

Here's an updated fiddle.

Inline Form nested within Horizontal Form in Bootstrap 3

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

Form Inline Inside a Form Horizontal in Twitter Bootstrap