[FIXED] How to avoid resetting paragraph and list item styles for some specific region without custom classes for each one?

Issue

By default Bootstrap sets paragraph margins to zero, it also removes the default styles from lists (such as paddings/bullets).

The reason they do this is well explained, pretty clear and understandable.

Use case: we have a section of user-generated content on the page with applied Bootstrap 5 styles; this section contains paragraphs and lists, which we would like to be displayed with the default styles (such as: paragraphs have margins, lists have bullets etc).

Question: is there any way to do that without assigning classes to each paragraph / list and without redefining those styles again back to original?

Best solution would be some class applied to wrapper, which applies the default styles to all the children elements (i.e. 'resets the reset'), but reading Bootstrap docs did not help.

Thanks.

Solution

You may be able to wrap the content in a single element and use revert to undo Bootstrap's reset.

.normal-typography p,
.normal-typography h2,
.normal-typography ul {
  margin: revert;
  padding: revert;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="normal-typography">
  <h2>Headings and paragraphs</h2>

  <p>All heading elements—e.g., <code>&lt;h1&gt;</code>—and <code>&lt;p&gt;</code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>

  <ul>
    <li>All lists have their top margin removed</li>
    <li>And their bottom margin normalized</li>
    <li>Nested lists have no bottom margin
      <ul>
        <li>This way they have a more even appearance</li>
        <li>Particularly when followed by more list items</li>
      </ul>
    </li>
    <li>The left padding has also been reset</li>
  </ul>

  <p>The <code>&lt;hr&gt;</code> element has been simplified. Similar to browser defaults, <code>&lt;hr&gt;</code>s are styled via <code>border-top</code>, have a default <code>opacity: .25</code>, and automatically inherit their <code>border-color</code>    via <code>color</code>, including when <code>color</code> is set via the parent. They can be modified with text, border, and opacity utilities.</p>
</div>

Answered By - isherwood

Answer Checked By - Marie Seifert (PHPFixing Admin)