Few files from SCSS folder are not available anymore after upgrade from 4.5.3 to 5.3.3

[TechBright]

We have recently updated the version of bootstrap from 4.5.3 to 5.3.3 and since the building is failing due to below files we are referring in our main.scss are not found anymore.

@import "../../../node_modules/bootstrap/scss/print"
@import "../../../node_modules/bootstrap/scss/media"
@import "../../../node_modules/bootstrap/scss/jumbotron"
@import "../../../node_modules/bootstrap/scss/custom-forms"
@import "../../../node_modules/bootstrap/scss/code"

I am guessing there must be an alternative files I should refer instead or equivalent. Our application depends on those files, I could build the application successfully after commenting out above files but the layout all shattered.

I would appreciate if anyone suggest me how to solve this issue.

[ynng3]

The jumbotron has been removed as it can be sufficiently implemented using other utility classes, and the rest have been integrated into other CSS settings internally, rather than being separated into distinct files.

Please refer to the migration guide for confirmation, or if you wish to continue using the old method, consider creating a new SCSS file by referencing the lower version of the respective file.

Migration Guide

[aniruddhaadak80]

Hi @TechBright ,

After upgrading Bootstrap from 4.5.3 to 5.3.3, the SCSS files you've mentioned are no longer available because Bootstrap 5 has made some changes, including removing or renaming certain components. Here are the alternatives you can use:

1. Print: Instead of @import "../../../node_modules/bootstrap/scss/print";, you can use Bootstrap's built-in print utility classes in your HTML and customize your print styles using CSS.

2. Media: The media utilities have been integrated into the core Bootstrap CSS, so you can use the responsive utility classes directly in your HTML.

3. Jumbotron: The jumbotron has been replaced with the hero component in Bootstrap 5. You can use the .hero class instead.

4. Custom Forms: Bootstrap 5 has restructured form components, so you should replace @import "../../../node_modules/bootstrap/scss/custom-forms"; with the appropriate form classes from the new documentation.

5. Code: For code styling, use the new syntax highlighting classes provided by Bootstrap, like .bg-dark and .text-white for code blocks.

Make sure to check the Bootstrap 5 migration guide for detailed changes and how to adapt your styles accordingly.

Thanks!