How do I remove column padding to have full-width inputs in Bootstrap 3?

Question

How do I get rid of padding in Bootstrap 3's columns?

In the following plunkr, I'd like for the button and text input to be touching: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview and for each to fill the entire width of the div. I'd like them to have no left or right padding. Same for the "pull me left" and "me too" divs.

When I override the padding-left in my own CSS, it pulls everything to the left, making the "Jim" and "Hello" div's content off screen.

Any ideas?

Solution

You can achieve this by adding a class to the row which removes padding from all immediate div elements with a class name beginning with "col-".

See here: http://plnkr.co/edit/MBkojy?p=preview

Comments

[iffy]

Thank you @Anobik, but I'm looking for a way to do it for all divs, not with the style attribute. I should have said so.

[Anobik]

try using a css class and assigning the class to the required divs. :) use javascript or body onload function to assign the class to all those div which have button as a child and a textbox. use js getElementsByClassName and you will get an array and check for it.

[iffy]

If I just do just div {padding-left: 0px !important; padding-right: 0px !important;} the divs overflow into each other. But if I also set margin-left: 0px !important; margin-right: 0px !important; it looks right.

[iffy]

Thank you! This seems to do what I want. (Though I just abandoned bootstrap in favor of a much smaller custom grid system).

[Stefan Fisk]

creating a div rule like the the first one is guaranteed to mess up stuff in ways you cannot imagine, use classes as far as possible.