Add .form-condensed

[dyve]

The default forms are widely spaced vertically. I propose an add-on class .form-condensed, comparable to .table-condensed to use less space between the lines. If I find the time to make a pull request I will, but for now, here's my local solution:

.form-condensed .control-group {
    margin-top: 0;
    margin-bottom: 5px;
}

[mdo]

Also not something we'll be adding to the core at this time. The forms can be customized easily enough to reduce this when folks need it. Thanks though!

[dyve]

I agree that it's easy enough to do yourself. But:

1. The current forms have a substantial vertical margin, enough to make forms that consist of a few lines require scrolling.
2. There would be a logical analogy with table / table-condensed

Humble request to look at this one more time.

[yuchant]

+1 for a condensed form developed further than mere margin top and bottom.

[denispeplin]

It will be great to have form-condensed class. Default forms are HUGE without any options. The solution from above does not work for twitter-bootstrap + simple_form.

[ghost]

Gonna have to agree with this one, the default forms are rather large.

[ippa]

"table-condensed" makes sense. I came here googling for that exact string :)

[bastibense]

+1
By default the form-horizontal are so huge that it hurts. Might work for signup forms on websites, but as soon as you write a web app that makes use of a number of fields, this gets really annoying. Also I did type in "form-condensed" a couple of times already by intuition.

[christopheg]

+1
Default style makes the forms useless for webapps

[pjean]

👍

[sapanparikh18]

+1 ... really need this

[severn-leon]

+1 ... forms definitely too big for some uses

[krokodile]

+1

[maikoliv]

+1

[krmcbride]

+1

[benn0r]

+1

[dennis-g]

+1

[scharmetant]

+1
on several occasions, forms are just way too laaaaarge: not everyone has a 26" screen, plus theses are hard to carry in you pockets...

[heruan]

I also think this should be address in 3.0.0. Now I'm adding .input-small to all inputs but this is really annoying. A .form-condensed class to do this automatically would be very useful!

[diegopso]

+1

[allenlz]

+1

[MilosStanic]

+1

[geraldodev]

+1

[tarlepp]

+1

[grishin]

+1

[mukassa]

+1

[jahkeup]

+1

[kolypto]

+1

[mrgrain]

+1

[alahtarin]

+1

[mkeuschn]

+1

[titpetric]

+1

[NAE]

+1

[peterniemann]

The following worked for me

.form-group {
   margin-bottom: 1px;
}

[AllenPasch]

I've written the following code:

@import (reference) "../external/bootstrap/less/variables.less";
@import (reference) "../external/bootstrap/less/forms.less";
@import (reference) "../external/bootstrap/less/mixins.less";


/**
 * Use .form-condensed to make a smaller Bootstrap form.
 */
@label-padding-sm: 2px;


.form-condensed {
    .form-control,
    .input-group-addon,
    .input-group-btn > .btn {
        .input-sm();
    }
    textarea,
    select[multiple],
    select[size] {
        &.form-control {
            height: auto;
        }
    }

    label {
        margin-bottom: @label-padding-sm;
    }
    .help-block {
        margin-bottom: @label-padding-sm;
        margin-top: @label-padding-sm;
    }

    .form-group {
        margin-bottom: @padding-base-vertical;
    }
    .checkbox,
    .radio {
        margin-bottom: @padding-base-vertical;
        margin-top: @padding-base-vertical;
    }

    // Reset rounded corners (taken from input-groups.less).
    .input-group-addon:first-child,
    .input-group-btn:first-child > .btn {
        .border-right-radius(0);
    }
    .input-group-addon:last-child,
    .input-group-btn:last-child > .btn {
        .border-left-radius(0);
    }
}
.form-horizontal.form-condensed,
.form-horizontal .form-condensed,
.form-condensed .form-horizontal {
    .control-label {
        padding-top: @padding-small-vertical;
    }

    .checkbox,
    .radio {
        margin-bottom: 0;
        margin-top: 0;
        min-height: @line-height-computed;
        padding-top: 0;
    }
}
.form-inline.form-condensed,
.form-inline .form-condensed,
.form-condensed .form-inline {
    @media (min-width: @screen-sm-min) {
        .form-group {
            margin-bottom: 0;
        }
    }
}

[AllenPasch]

While the .form-condensed class is pretty awesome, it may add complexity to the CSS in cases I haven't looked at yet, and sometimes I'm finding I want tighter control over certain parts of a form (namely the submit buttons, but sometimes help-blocks as well). So, I'm guessing Bootstrap will implement a .form-group-sm class instead of .form-condensed.

Today I updated the code above and wrote the new code below. It looks nice on all of the denser forms I've Bootstrapped thus far.

It'll be nice to see either a .form-condensed or .form-group-sm class in Bootstrap!

@import (reference) "../external/bootstrap/less/variables.less";
@import (reference) "../external/bootstrap/less/forms.less";
@import (reference) "../external/bootstrap/less/mixins.less";

@label-padding-sm: 2px;


/**
 * Use .form-group-sm to condense a .form-group.
 */
.form-group-sm {
    margin-bottom: @padding-base-vertical;

    label {
        margin-bottom: @label-padding-sm;
    }

    .form-control,
    .input-group-addon,
    .input-group-btn > .btn {
        .input-sm();
    }
    textarea,
    select[multiple],
    select[size] {
        &.form-control {
            height: auto;
        }
    }

    .checkbox,
    .radio {
        margin-bottom: @padding-base-vertical;
        margin-top: @padding-base-vertical;
    }

    // Reset rounded corners (taken from input-groups.less).
    .input-group-addon:first-child,
    .input-group-btn:first-child > .btn {
        .border-right-radius(0);
    }
    .input-group-addon:last-child,
    .input-group-btn:last-child > .btn {
        .border-left-radius(0);
    }
}
.form-horizontal {
    .form-group-sm {
        .checkbox,
        .radio {
            margin-bottom: 0;
            margin-top: 0;
            min-height: @line-height-computed;
            padding-top: 0;
        }
    }
}

/**
 * When using .input-sm, add .control-label-sm to the label.
 */
.form-horizontal {
    .control-label-sm,
    .form-group-sm .control-label {
        padding-top: @padding-small-vertical;
    }
}

/**
 * Use .help-block-sm to tighten up the area around a .help-block.
 */
.help-block-sm {
    margin-bottom: @label-padding-sm;
    margin-top: @label-padding-sm;
}

[mdo]

This was originally for v2.x, and the latest stuff is for v3.x I think. If the need and want is still there, please open a new issue or even better a pull request. Closing this old thread out for good now though.