Override Bootstrap 5 fieldset style

Issue

Back in previous versions of Bootstrap (and also with vanilla CSS), the following HTML:

<fieldset>
  <legend>Test</legend>
    Welcome!
</fieldset>

Outputs a fieldset with a border, where the legend goes over it:

Nevertheless, when the same HTML is used alongside Bootstrap 5, the output looks like this:

How can I override bootstrap CSS, so the fieldset has its border visible again with its legend over it?

Solution

Any css can be reset to its default by using revert:

fieldset, legend {
   all: revert;
}

.reset {
    all: revert;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<fieldset>
    <legend>Legend</legend>
</fieldset>

<fieldset class="reset">
    <legend class="reset">Reset legend</legend>
</fieldset>

Answered By - dantheman