Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 259
Se Norm Avatar asked Nov 28 '12 01:11

Se Norm


People also ask

Which is the default form in bootstrap horizontal form vertical form Inline form none of the options?

Explanation: The basic layout of a bootstrap form by default is vertical. However, a user can change the layout and convert it to inline or horizontal with the help of different classes such as . inline class and .

How do I create a horizontal form in bootstrap?

Horizontal formCreate horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label> s as well so they're vertically centered with their associated form controls.

What are different types of form layouts in bootstrap and which one is default form layout?

Layout. Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.


1 Answers

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>
like image 60
Arnold Daniels Avatar answered Oct 07 '22 10:10

Arnold Daniels