Remove bottom form margin when inside a modal

[pamelafox]

I think a common use of modals will involve a form inside the modal, and buttons for the form in the footer. With the default CSS, the form will have a margin-bottom, and that doesn't look great in the modal.

I made this change:
.modal form {
margin-bottom: 0px;
}

Example HTML where I use this:

×

Send us feedback

We love feedback! If you have suggestions, bugs, or questions, just tell us here.

<textarea id="comment" name="comment" style="width:98%; height: 50px; margin-bottom: 10px;"></textarea>

Send

Feedback

It's a small thing so perhaps not worth adding global change. Your call.

[mdo]

Yeah, it's an interesting challenge because the form might not be the last thing in the modal and you would need that extra space. Going to file this as a bug though anyway and see if we can make it happen.

[mdo]

Fixed in dev branch for now by undoing bottom margin for forms in modals. Will revisit in 2.0.

[effectjam]

When will version 2.0 launch?

[idbentley]

There is an additional complication when using with (at least) form-stacked, which adds a left-padding as well.

[pokonski]

@effectjam it has no date set, so far.

[tuler]

I'm trying to put a form in a modal, but it's still with a bottom margin. I saw there is a class called modal-form, which resets margin-bottom to 0. Where should I apply this class?

[candreoliveira]

@tuler It should be applied as the class of the form you are using inside the modal.