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;
 }

score 0 · Answer 1 · answered Jul 16 '20 at 12:52

0

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?

answered Jul 16 '20 at 12:52

Andrzej Dzirba

337
2
12

Thanks for the response. When I inspect element, it points to the blockquote. I also tried setting border: 0 using blockquote::after and blockquote::before, but it had no effect. I edited my question to show this. Any other suggestions are appreciated. – Darth Mikey D Jul 16 '20 at 13:35
What theme are you using? – Andrzej Dzirba Jul 16 '20 at 19:01
Sorry I didn't get back to you yesterday. I am using a custom theme I designed. However, I tried the other themes that come with WordPress, and the same thing happened. – Darth Mikey D Jul 17 '20 at 12:32
I see - i did some work with bootstrap themes and usually it was just plain style on blockquote. Publish it and maybe it would be possible to find the styling place. Otherwise it's just quite difficult to guess what causes unwanted styling. – Andrzej Dzirba Jul 17 '20 at 12:52

score 0 · Answer 2 · answered Jul 17 '20 at 14:01

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.

Bootstrap in WordPress adding a gray bar to blockquotes

2 Answers2