Fieldset legend does not work in bootstrap 5.0 beta-1

[TanvirArjel]

The following code does not work in v5.0 beta-1 while it perfectly works in v4.5.3

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

[mdo]

Looks about the same flipping through this? https://codepen.io/emdeoh/pen/eYdEWba

You'll have to be more specific with bug reports, and include browser/OS versions.

[TanvirArjel]

@mdo You have wrongly closed the issue. You even did not read my issue properly. The demo you shared is with v4.5.3 and I said that it's not working in v5.0.0-beta-1. Please reopen the issue.

This is happening in all chromium browsers.

I am using Windows 10 20H2 (OS build 19042.685).

[mdo]

Apologies, the demo was meant to include v4.5.x and v5.x. Here's the updated demo: https://codepen.io/emdeoh/pen/eYdEWba.

[TanvirArjel]

@mdo I see it's not working in your demo with v5.0.0-beta-1.

[TanvirArjel]

@mdo I am waiting to hear from you.

[mdo]

@MartijnCuppens Having trouble finding a PR. Did we drop the legend in the border for the fieldset in v5? #30345

[MartijnCuppens]

Fieldset didn't have a border in v4 too: https://getbootstrap.com/docs/4.5/content/reboot/#forms:

<fieldset>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.

In v5, we've reset the <legend> styles to simplify theming.

[TanvirArjel]

@MartijnCuppens <fieldset> and <legend> work perfectly fine in v4.5.3 but not in v5.0.0-beta-1. So what can we do to have HTML's default <fieldset> and <legend> structure while using boostrap v5.0.0-beta-1?

[TanvirArjel]

@MartijnCuppens I am expecting a response from you. Or if you think it's a bug then please reopen the issue.

[TanvirArjel]

@mdo Any update on this issue, please?

[ffoodd]

@TanvirArjel We're all working on Bootstrap for free and beside our own jobs and life, please stop pressing.

FYI we added float: left; on legend on purpose to ease border customization: comment and commit.

If the bug you're chasing is that legend does not overlap border anymore, this is not a bug since it's intended. To get your legend funky again, you may use .float-none on them.

If that's not the bug you're describing, please describe it again as you only said "it does not work", which is not really helpful.

[MathewJM]

float: none; tends to resolve any issues in terms of having the legend behave as a traditional HTML5 legend, as an immediate child of the fieldset element.

[ligz-anghao]

I had the same issue and I prefer to add legend as caption overlay the fieldset's border. I used .float-none to the legend and it works for me. Before read the tips here I googled a lot. Thanks so much. @ffoodd

[amirsoltaani]

fieldset class="border rounded-3 p-3" legend class="float-none w-auto px-3"

this should work!

[changhuixu]

.float-none on legend does the trick

[gabrielsimas]

adding text-center so awesome too...
check out: float-none w-auto px-3

[Udo-Eng]

Thanks alot guys using border rounded-3 p-3 on fieldset and float-none w-auto px-3 on legend sure worked for me

[gabrielsimas]

Thanks alot guys using border rounded-3 p-3 on fieldset and float-none w-auto px-3 on legend sure worked for me

you're welcome! it's a pleasure!

[bhojkamal]

yes, why they changed it the default html? It is not not working on bootstrap 5 on any stable version? If I put class float-none, the col-lg-6 and col-lg-6, the second col-lg-6 does not stay at right, it comes beneath the first one.

[HassanJalali]

Thanks alot guys using border rounded-3 p-3 on fieldset and float-none w-auto px-3 on legend sure worked for me

yes its work fine,