Bootstrap 5.3 update

What’s new on Bootstrap 5.3.0 :

- Dark mode:
Bootstrap’s core has been rewritten to provide first-class support for dark mode. Moreover, Bootstrap now supports any number of color modes, allowing you to build your own custom themes or more nuanced color modes.

- Refreshed color palette:
https://getbootstrap.com/docs/5.3/customize/color/#colors

- New link helpers and utilities

- New nav underline

- New focus ring helper

- Deprecated the .text-muted utility and $text-muted Sass variable.

Hi,

I encountered a regression on the floating labels. See attached gif.

I found the root and it is from https://github.com/twbs/bootstrap/blob/main/scss/forms/_floating-labels....

      &::after {
        position: absolute;

And the blame points to this commit https://github.com/twbs/bootstrap/commit/3aabfc70c38db03e77229a49f4f8c7e....

I do not have the time to create an issue in the upstream, and also I am not sure if they would be interested in having a bug fix because Bootstrap does not provide required mark, this is purely a Drupal addition.

I currently made a workaround in a project with the following SASS code:

// Bootstrap 5.3 bug workaround.
body {
  .form-floating {
    > .form-control:focus,
    > .form-control:not(:placeholder-shown),
    > .form-control-plaintext,
    > .form-select {
      ~ label {
        &::after {
          position: unset;
        }
      }
    }
  }
}

I would like to discuss if we should/could put it in ui_suite_bootstrap theme or in the starterkit?

Grimreaper → closed merge request !96

Automatically closed - issue fixed for 2 weeks with no activity.