[solved] Can't make paragraph look like blockquote w/out using blockquote

[solved] Can't make paragraph look like blockquote w/out using blockquote
0

#1

I’M SO CLOSE!!
Just a little bit more and my portfolio is done.
-anyway-

  • I have bio paragraph next to my pic.
  • I want the paragraph to look like a blockquote but I don’t want to use blockquote because it has that border on the left.

Can you guys finagle something here?
tx


#2

For the blockquote issue, you can inspect the element to see what styling the blockquote has and then create your own style for it.

To access the element inspector you can press ctrl + shift + I on Chrome.

Once the dev tools window pops open press ctrl + shift + C to start the element picker. You’ll notice that mousing over any page element shows you a box and element description. Hover over the part you want to investigate, in this case your bio text, and click it.

In the dev tools you should see a little section off css stylesheet.

This is the relevant bit on your page:
image

This shows us that the blockquote is being styled by bootstrap and the bit you don’t like is that border-left property.

So instead of just deleting the blockquote, you could replace it with a div and give the div a class like bio-text. Then in your own css sheet, add all the other parts of that blockquote styling you liked, but leave out the border-left part.


#3

:open_mouth: :scream: wow that is crazy useful and not just for this blockquote stuff but for anything else I want to imitate or understand. Can’t wait to get to work and check that out lol.
I had no idea I could do that!
Thats a keeper, tx @JacksonBates


#4

Hi,

this is really interesting. On my side, I don’t understand why my Blockquote does not appear as a blockquote bootstrap. The css stylesheet of the blockquote is:
blockquote {
margin: 0 0 1rem;
}
it looks like it does not inherit from bootstrap, see the screenshot.

any idea why?
thanks,


#5

Bootstrap uses a stylesheet called reboot which makes sure the base styles (before you add any bootstrap classes) look the same in every browser. Blockquotes have, by default, a margin-bottom in every browser. Reboot sets that margin to 1rem, rather than an arbitrary default px value, to fit with the sizing of margins/padding used in Bootstrap.

Bootstrap applies styling to elements you give specific classes to. Reboot gives you a sane base to build that on. It is why, when you add bootstrap, the styling will look different to the browser defaults even before you use the Bootstrap classes.


#6

HI,

ok thanks for your feedback.
After adding bootstrap3 in the setting, it is displayed as expected.
does it make sense?