Customize the fieldset style in Bootstrap 5

In earlier versions of Bootstrap (or with plain CSS), the following HTML code used to result in a fieldset with a visible border, where the legend sat on top:

<fieldset>
  <legend>Test</legend>
    Welcome!
</fieldset>

Here is how it looked:

https://i.sstatic.net/qVjZC.png

However, when the same HTML is used in Bootstrap 5, the output appears differently:

https://i.sstatic.net/NnP6t.png

Is there a way to override Bootstrap's CSS so that the fieldset once again displays its border with the legend positioned on top?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Encountered a similar issue but found a helpful approach that worked in my case. For more details, refer to the following link.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e504e52">[email protected]</a>/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>

Answer №2

To reset any CSS property back to its default value, you can use the revert keyword:

fieldset, legend {
   all: revert;
}


.reset {
    all: revert;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e918e93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

<fieldset class="reset">
    <legend class="reset">Reset legend</legend>
</fieldset>

Answer №3

One way to tackle this issue is by customizing the styles of legend and fieldset using CSS:

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

However, some may argue that this method is not the most elegant solution. Are there any recommended methods to handle this situation more effectively?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Flexbox with a column wrap and setting the height to min-content, the wrapping behavior may not

I'm facing a CSS challenge. I have divs of varying heights and I want the parent element to adjust its height based on the tallest child element, while keeping the rest of the elements aligned properly. The code provided below achieves this for rows b ...

cssflexbox

Steps for highlighting specific character(s) within a textarea

I am working on a program to search for specific characters within a designated <textarea> element. I want to be able to highlight or color the characters that match the search criteria within the text area. How can I achieve this effect and color th ...

javascriptjquerycsstextarea

Ways to add style to Chrome without causing any changes in Edge

I'm working on fixing a bug in Chrome and have successfully applied a style to correct it. However, when I view it in Edge, the appearance is not right. How can I target only Chrome (version 60) with my styles, without affecting other browsers? @medi ...

cssgoogle-chromemicrosoft-edge

Looking to enhance your front-end assets with Bootstrap js plugins in the brunch-config.js file?

I'm trying to incorporate Bootstrap's alert.js plugin as a front-end asset, but I'm having trouble getting it to work using brunch-config.js and npm. In my current brunch configuration (which includes adding jQuery and Bootstrap CSS to asse ...

wordpresstwitter-bootstrapnpmbrunch

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

css

The rendering controls in DataTables are not functioning as anticipated

There seems to be an issue with the rendering of controls. Currently, I am using the following libraries: jquery 3.3.1 bootstrap 5.1.2 DataTables 1.13.2 In order to improve control functionality, I have implemented the following code: var MDT=$('#myT ...

datatablesbootstrap-5

CSS: Obtain a button and align it to the "a" element

Feeling a bit puzzled: https://i.stack.imgur.com/S7xKh.png In the image, there's a span button labeled "Navigation einblenden", and a span a tagged as "Suche". Despite styling them identically: In the CSS snippet, dispOpts is the parent span's ...

htmlcss

Differences between Next.js Image and regular img tag regarding image quality

I am currently using Next.js and have noticed that my images appear slightly blurry when utilizing Next/Image. Below is a snippet of my code: <img src={url} width={articleWidth} /> <Image className="text-center" src={url} ...

htmlcssimagenext.js

JQuery Searchbar Failing to Hide Divs as Intended

I'm currently facing an issue with my <user-panel> elements, which are dynamically created using ng-repeat. Each of these elements contains child divs with the class user-panel-name. I've been attempting to use the text within these name di ...

jqueryhtmlangular

Tips on showcasing an array as a matrix with a neat line property

I am currently developing an application using TypeScript, and utilizing a JSON array structured like this: data = [{"name":"dog", "line":1}, {"name":"cet", "line":1}, ...

htmljsonangulartypescript

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file. My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file? For instance: tailwind.config.js: const d ...

cssvue.jstailwind-css

Why is PHP unable to identify the custom-designed CSS button upon submission?

I'm having a design issue where the button on my form is not being detected. I've tried various methods like changing the class name, assigning it a name via HTML, but nothing seems to work. Here is my button: .blue_button { background: #005b66; ...

phpcss

Why are the buttons on my HTML/JavaScript page not functioning properly?

I have been struggling with a code for a 5 image slideshow where the NEXT and PREVIOUS buttons are supposed to take me to the next and previous slides. However, when I press them, nothing happens. Can anyone provide some assistance? I need additional detai ...

javascripthtml

Working with JavaScript Events within an Iframe

Is it possible to link an onclick event to an IFrame? I attempted using the HTML attribute, but that approach was unsuccessful. Next, I enclosed it within a div, which also did not work. Finally, I tried setting up a jQuery event handler, only to encounte ...

javascriptjqueryhtmliframe

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

JavaScript file to run with npm start: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; ReactDOM.render( <R ...

javascripthtmlreactjsexpressjsx

Executing unique calculations on Kendo UI Grid Columns

For experienced users, this may seem simple, but as a newcomer, I'm struggling with a basic arithmetic task. I want to multiply one of the column values (DealValue) by 0.05 in my Kendo grid setup. Despite looking through the Kendo docs, I couldn' ...

javascriptjqueryhtmlkendo-uikendo-grid

Implementing spacing to columns in Bootstrap 4

Is there a way to add margin to the "col" element with the class "mr-md-3" without causing any layout breaks within the containing div? .content { height: 200px; border: 1px solid black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

htmlcssbootstrap-4

Can React JSX and non-JSX components be combined in a single project?

I'm currently faced with a question: If I have a parent component in JSX but need to include an HTML tag like <i class="fa fa-window-maximize" aria-hidden="true"></i>, which is not supported by React JSX (correct me if I'm wrong), can ...

javascripthtmlreactjsjsx

What is the method for customizing the default dropdown color of a bootstrap 4 selectpicker?

In my form, there are single and multiple dropdown selects. To keep things simple, I use the selectpicker class for both types. However, I want to customize the default grey color for Bootstrap 4 Dropdown with the selectpicker class to a clear color. Which ...

htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker