CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
jfdoming
jfdoming

Reputation: 975

Bootstrap Extra padding inside div

I'm implementing a userscript (in Tampermonkey) for a website I frequently use, and I'm trying to add a div to the page. All's well if I add the div to the top of the page (to the root element):

enter image description here

But as soon as I add it inside a Bootstrap column, I get some annoying extra padding as seen below:

weird padding

I've tried fiddling with the styling through the Chrome Developer Tools and the only way I could get the padding to disappear was by deleting all the elements occurring before in the column and also setting the ":before" element in the parent row to "display:inline". I think I'm probably misunderstanding how Bootstrap works and there's probably an easy fix, but I've been experimenting for a while and searching online and I haven't found anyone with a similar issue. Does anyone have any idea what might be causing the padding issue, and how I might fix it?

Edit: the Bootstrap version seems to be 3.3.2 (I can't update it as this is a userscript) and the HTML, once inserted, looks like the following (the "project-dropdown" element is the one I have inserted):

enter image description here

The CSS applied to the "project-dropdown" element looks like this:

enter image description here

Upvotes: 0

Views: 342

Answers (1)

Davide Vitali
Davide Vitali

Reputation: 1035

The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.

Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.

Cheers!

Upvotes: 1

Related Questions