bootstrap form inside panel layout looks wrong

Question

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

I coloured the form red so that I could see where it was ;) here's the jsFiddle : https://jsfiddle.net/DTcHh/

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

(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 ?

thanks

Answer 1

According to bootstrap docs (https://getbootstrap.com/docs/3.4/css/#forms-horizontal), 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.