Bootstrap in WordPress adding a gray bar to blockquotes

Question

I am working on creating a plugin that requires Bootstrap. I have enqueued the correct Bootstrap and jQuery libraries. Everything is working fine on the page, but when I put a blockquote in the page, it adds a gray bar to the left. I tried using the following to get rid of it, but it didn't work.

blockquote {
    border-left: 0px;
}

This is what is happening:

Any help or advice is appreciated.

EDIT

When I inspect element, it points to the blockquote tags. I also put in a blockquote by itself in the page content, which is how I got the above.

I tried the following to see if that would do anything, but it didn't help:

blockquote::before {
    border: 0px;
}

blockquote::after {
    border: 0px;
 }

Answer 1

Well - if changing border to 0 px does not change the blockquote's grey bar it means that this element is probably no the one responsible for this bar. To state the obvious. Use browser's Inspector to find which element has this bar - it may be ::before or ::after pseudoelement attached blockquote, or maybe blockquote is wrapped in some div or span? What theme are you using?

Answer 2

I figured out what was happening. bootstrap.min.css had the following:

blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}

I simply overwrote it in my local css file with:

blockquote {border-left: 0px;}

Thanks for those who looked.