Blockquotes are not styled and do not nest anymore.

[2dareis2do]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

In Bootstrap 3, blockquotes could be nested, and appear to be nested:

e.g.

<blockquote>Some quote here<blockquote>A response here</blockquote></blockquote> or

Some quote here

and

Some quote here

A response here

Also in bootstrap 5 blockquotes also use figure and figcaption. Again it would be good to have a way to nest these. e.g.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
</figure>

or

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Styling was on the actual element.

In Bootstrap 5, the styling has moved to a class, which I understand, but also any styling around this appears to have gone (indentation/padding, border colour etc).

Furthermore, It is not clear form your documentation how to nest block quotes with bootstrap 5 with out overriding with some custom css e.g.

.blockquote {
  border-left: var(--bs-blockquote-border-width) solid var(--bs-body-color);  
  font-style: italic;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  padding-left: var(--bs-blockquote-padding);
  padding-right: var(--bs-blockquote-padding);
}

Reduced test cases

1. Update documentation and show how to indent/nest blockquotes
2. Bring back some elementary styling

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

5.3.2

[2dareis2do]

Interestingly blockquotes indentation is being used here. CSS is like so:

.markdown-body blockquote { padding: 0 1em; /* color: var(--fgColor-muted, var(--color-fg-muted)); */ border-left: .25em solid var(--borderColor-default, var(--color-border-default)); }

So it looks to me as if this has been added ontop of any base theme aka Bootstrap 4 /5

also there is a blockquote widget that seems to use markdown syntax e.g.

my blockquote

[julien-deramond]

Thanks for opening an issue @2dareis2do Could you please update your description to use Quoting code so that we can see the code etc. instead of the code being interpreted by GitHub Markdown? And gather all your ideas into this same description.

[github-actions[bot]]

Hello @2dareis2do. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[2dareis2do]

Thanks for quick response Example here of what I would expect:

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-text

example here of how it is

https://getbootstrap.com/docs/5.3/content/typography/#blockquotes

also example here of how it has been implemented (bs5.3) with override

[2dareis2do]

Just to update you I have reworked the markup around this and found that this format works better for me. Notice how .blockquote class can be applied to the parent element, i.e. figure

<figure class="blockquote text-left">
    <blockquote>
        <p>
            In Drupal, there are 4 types of PHPUnit tests.
        </p>
        <h4>
            <strong>Unit</strong>
        </h4>
        <p>
            PHPUnit-based tests with minimal dependencies.
        </p>
        <p>
          ...
        </p>
    </blockquote>
    <figcaption class="blockquote-footer">
        <a href="https://www.drupal.org/docs/automated-testing/phpunit-in-drupal/running-phpunit-javascript-tests">https://www.drupal.org/docs/automated-testing/phpunit-in-drupal/running-phpunit-javascript-tests</a>
    </figcaption>
</figure>

e.g.

In Drupal, there are 4 types of PHPUnit tests.

Unit

PHPUnit-based tests with minimal dependencies.

...

https://www.drupal.org/docs/automated-testing/phpunit-in-drupal/running-phpunit-javascript-tests

Working example here https://www.danlobo.co.uk/article/testing-functional-javascript-vs-nightwatch-drupal-10x-and-ddev Also note how blockquote and q works and how blockquote by default supports indentation. https://www.w3.org/WAI/tutorials/page-structure/content/#quotes

Also note here how blockquote should use the cite attribute

https://www.w3schools.com/tags/att_blockquote_cite.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

[2dareis2do]

Thinking about this, I am not clear why you have decided to use figure tag for blockquote tags? There is no mention of figure tags here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

[davidcsterratt]

I think I'm experiencing the same problem. Here's my first shot at using codepen to show what I mean: https://codepen.io/davidcsterratt/pen/WNmrGbX