Override Bootstrap 5 fieldset style-CodePudding

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?

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

<fieldset >
    <legend >Reset legend</legend>
</fieldset>

CodePudding user response：

A solution might be overriding legend and fieldset in CSS like this:

fieldset {
    border: solid 1px gray;
    padding-top: 5px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
}
legend {
    float: none;
    width: inherit;
}

However I don't think this approach is the cleanest for this approach, is there any recommended way to achieve this?

CodePudding user response：

Some !important; to the bootstrap CSS might help.