Bootstrap not affecting styles in Blazor app

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Bootstrap not affecting styles in Blazor app

We migrated our app to .Net 8 and it seems that Bootstrap is not responding as it used to. I set up some test divs to check. In my Index page, I set up a bunch of divs which should only show one at a time. They all show.
div
client\Pages\Index.razor
div class=".d-block .d-sm-none" XS /div
div class=".d-none .d-sm-block .d-md-none" SM /div
div class=".d-none .d-md-block .d-lg-none" MD /div
div class=".d-none .d-lg-block .d-xl-none" LG /div
div class=".d-none .d-xl-block .d-xxl-none" XL /div
div class=".d-none .d-xxl-none" XXL /div

div class=".d-block .d-sm-none" XS /div
div class=".d-none .d-sm-block .d-md-none" SM /div
div class=".d-none .d-md-block .d-lg-none" MD /div
div class=".d-none .d-lg-block .d-xl-none" LG /div
div class=".d-none .d-xl-block .d-xxl-none" XL /div
div class=".d-none .d-xxl-none" XXL /div

I'm using Bootstrap 5. The bootstrap css files show up in the browser's Sources tab. What could I check?
server\App.razor
head
meta charset="utf-8" /
base href="/" /
link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /
RadzenTheme Theme="standard" @rendermode="InteractiveWebAssembly" /
link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"
link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" /
link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" /
link rel="stylesheet" href="css/app.css" /
HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" /
/head

head
meta charset="utf-8" /
base href="/" /
link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /
RadzenTheme Theme="standard" @rendermode="InteractiveWebAssembly" /
link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"
link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" /
link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" /
link rel="stylesheet" href="css/app.css" /
HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" /
/head

[email protected]
[email protected]


Tags: asp.net-core,blazor,bootstrap-5Source of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/