CODEWITHSUNDEEP
formstwitter-bootstrap
Se Norm
Se Norm

Reputation: 1755

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

I would like to have a form which has a horizontal layout on the first level, but then within one row there can be a form "inline" which I want to have a vertical (the default) layout. Is there an easy way to achieve this?

Note: .form-inline doesn't do what I'm looking for, as it doesn't put the inside labels on top of the inputs.

So far I have something like this:

<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label">
           outer label
        </label>
        <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
            ### INLINE FORM WITH SAME STRUCTURE IS HERE ###
        </div>
    </div>
</div>

Upvotes: 14

Views: 14045

Answers (4)

Sia
Sia

Reputation: 9212

You do not need to write custom CSS for Bootstrap 3. Instead of putting your class of form-horizontal on the form tag, only put a wrapper div with that class around the form elements that you want to be horizontal (and supporting column-size classes for the horizontal items).

For example, this would work:

<form>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">I'm a horizontal form element</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>

  <div class="form-group">
    <label>I'm a vertical form element</label>
    <input type="text" class="form-control">
  </div>
</form>

This works because the vertical form is automatically used for a form with no class explicitly stated. That 'lack of a class' can be seen in the docs here.

Upvotes: 0

David K.
David K.

Reputation: 339

Here is @jasny-arnold-daniels CSS updated for Boostrap 3. In 3 form-group replaces control-group, form-control replaces control. Also needs @user9645 's change to width. New CSS is: 

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

Upvotes: 0

Arnold Daniels
Arnold Daniels

Reputation: 16573

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>

Upvotes: 8

zmanc
zmanc

Reputation: 5409

I was unsure exactly what you were looking for but I tried to guess.

I made a form with a two vertical lines the second line with multiple form elements.

I used inline-block to do this.

http://jsbin.com/icoduh/1/edit

Upvotes: -2

Related Questions