Blockquote Creating Unwanted Element

Blockquote Creating Unwanted Element



Beginner working on the Tribute Page and there is a “grey bar” to the left of my blockquote and I’m not sure why. Here is the CodePen. Would appreciate some knowledge. Thanks!


Hello !

Most elements in HTML have default values when it comes to their appearance. Blockquotes do have some defaults, like this gray border.

In order to remove it, simply create a specification in CSS for it like so :

blockquote {

Hope it helps !


I ended up looking at the example FCC provides (Dr. Borlaug) to help me get started and the only CSS is the margin-top. They are using the blockquote and not getting the border. Just trying to understand how FCC laid it out. Thanks!


Well this can be confusing, but yes, there is a border on the FCC example, but it’s the same color as the background-color, so nobody sees it.

This default as you see it, is specified by Bootstrap. You can easily override Bootstrap classes in your CSS.


Interesting. Appreciate the insight.


One more question if you don’t mind, how come it only displays only the left border and not all 4 sides then?


Because in this case, only a left border has been specified :

border-left:5px solid #eee;

that way, there’s only a border on this side. You can use any other of theses properties too :

border to make a border on every sides
border-right, border-top and border-bottom