CODEWITHSUNDEEP
wordpressblockquote
Darth Mikey D
Darth Mikey D

Reputation: 109

Bootstrap in WordPress adding a gray bar to blockquotes

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:

enter image description here

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

Upvotes: 0

Views: 65

Answers (2)

Darth Mikey D
Darth Mikey D

Reputation: 109

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.

Upvotes: 0

Andrzej Dzirba
Andrzej Dzirba

Reputation: 356

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?

Upvotes: 0

Related Questions