Non-horizontal form-group using fieldset renders legend font-size different than label
See original GitHub issueWhen using a <fieldset>
as the root element of a non-horizontal .form-group
(i.e. no .form-row
or .row
), the <legend>
element renders differently than a <label>
(specifically the font-size being set to 1.5rem
via reboot)
<div class="form-group">
<label for="input">Label</label>
<input type="text" class="form-control">
</div>
<fieldset class="form-group">
<legend>Foobar</legend>
<div role="group">
<div class="form-check form-check-inline">
<input id="check1" class="form-check-input" type="checkbox" name="checks" value="A">
<label for="check1" class="form-check-label">Radio A</label>
</div>
<div class="form-check form-check-inline">
<input id="check2" class="form-check-input" type="checkbox" name="checks" value="B">
<label for="check2" class="form-check-label">Radio B</label>
</div>
</div>
</fieldset>
Renders:
Manually adding a style font-size: inherit;
or font-size: 1rem;
to the <legend>
appears to fix this issue, but it would be preferential not to have to add the additional styling.
Proposed solution (to mimic <label>
default) in /scss/_forms.scss
before the .col-form-label
rule definition:
.form-group legend {
font-size: inherit;
}
Which renders the following (using the same above HTML):
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Form Group | Components - BootstrapVue
Easily add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text...
Read more >Use Fieldset Legend with bootstrap - html - Stack Overflow
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with ......
Read more >Forms - Bootstrap
Bootstrap's form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more...
Read more ><fieldset>: The Field Set element - HTML - MDN Web Docs
The HTML element is used to group several controls as well as labels ( ) within a web form.
Read more >Forms · Bootstrap - NC State Brand
form-inline as needed. Use it with <fieldset> s, <div> s, or nearly any other element. Example label.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Oh I agree it should be improved, but overriding like that could cause issues for folks who’ve built around this existing behavior.
Eh, just because a particular HTML element can have a class doesn’t mean something nested within that element should change. Again, I agree there should be some control here, just not in the solution offered here thus far.
In all likelihood, we should move from general
label { ... }
rulesets to.form-label { ... }
to help avoid issues like this as we could just apply that class. Perhaps for now v4 should havelabel, .form-label { ... }
or something akin?@tmorehouse looks like a
$legend-font-size
variable was added to allow theming the default<legend>
element: https://github.com/twbs/bootstrap/commit/855d763ae57fd1dea1c26af1f197d3d84002dc55#diff-d8ee409a461718bfb6240710c8c73382R345Can this be backported to v4?