Support Bootstrap 5 on bootstrap_styles module

Created on 24 May 2022, about 2 years ago
Updated 28 November 2023, 7 months ago

Problem/Motivation

Now Bootstrap 5 has a stable release,
There are a lot of differences between Bootstrap 4 and Bootstrap 5.
It's better to support Bootstrap 5 in bootstrap_styles to make all styles work as expected and to support new features.

Steps to reproduce

  • Check configuration files and replace old boostrap classes with new ones
  • Check Twig templates and make necessary changes
  • Check Javascript files and make necessary changes

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ“Œ Task
Status

Needs work

Version

1.1

Component

Code

Created by

πŸ‡―πŸ‡΄Jordan Abdullah Yassin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡©πŸ‡ͺGermany Guido_S Cologne

    In some cases Bootstrap 5 also changed classes from "left" to "start" and "right" to "end".

    #drupal-off-canvas .field-text-alignment .fieldset-wrapper > div > div input + label .input-icon[class*="left"],
    #layout-builder-modal .field-text-alignment .fieldset-wrapper > div > div input + label .input-icon[class*="left"] {
      background-image: url("../../images/plugins/text-alignment/text-left.svg");
    }
    
    #drupal-off-canvas .field-text-alignment .fieldset-wrapper > div > div input + label .input-icon[class*="right"],
    #layout-builder-modal .field-text-alignment .fieldset-wrapper > div > div input + label .input-icon[class*="right"] {
      background-image: url("../../images/plugins/text-alignment/text-right.svg");
    }

    So [class*="start"] and [class*="end"] need to be added. Maybe there are more cases like this.

  • πŸ‡©πŸ‡ͺGermany Guido_S Cologne
Production build 0.69.0 2024