Menu
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?
834
asked Dec 21 '25 11:12
Had the same issue and the following approach helped in my case. Refer to the following for further details.
https://github.com/twbs/bootstrap/issues/32548
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto px-3" >Test</legend>
Welcome!
</fieldset>
</div>
</body>
</html>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 class="reset">
<legend class="reset">Reset legend</legend>
</fieldset>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With