Fieldset Legend
Bootstrap / CSS / HTML

How to use Fieldset Legend with Bootstrap

Fieldset Legend

You may be searching for Fieldset Legend is not working properly with Bootstrap. The reason behind this is Bootstrap overrides the default CSS for fieldset and legend tags. So if you are using Bootstrap 3 then you can use the following CSS to make it work properly.

Fieldset Legend CSS for Bootstrap 3:

fieldset {
    border: 1px solid #ddd !important;
    padding: 5px !important;
}

legend {
    width: inherit;
    padding: 0 10px;
    border: none;
}

In case you are using Bootstrap 4 then you can achieve this by using its own classes like the given HTML. It means you don’t need to write extra CSS.

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

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *