jmls jmls - 1 year ago 166
CSS Question

bootstrap form inside panel layout looks wrong

If I have a form defined inside a bootstrap panel, then the form group layout goes to pieces.

enter image description here

I coloured the form red so that I could see where it was ;) here's the jsFiddle :

I have found that if I add

.panel-body .form-horizontal .form-group {
margin-right: 25px;
margin-left: 25px;

to the css, I then get this

enter image description here

(I coloured the form red so that I could see where it was ;) )

so it looks like it's fixed, but seems a terrible hack to me

  • Is this is a bug in bootstrap

  • Do I just have to apply this css

  • Is there something wrong with my form definitions ?


Answer Source

According to bootstrap docs (, the class form-horizontal makes <form> act like a .row so you don't need to add it and have .col-**-* in from groups, label and stuff. The docs give you an example o

But you have a .row inside a .row and no .col-**-*. .row has negative margin to delete the padding of his parent so with no .col-**-* as parent it has 2 negative margins.

So it's kind of messy. I suggest removing your .row and .form-horizontal class to achieve the look you want or add the margin like you already did.

Here it's a fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download