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.
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>
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/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/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>
class=".d-block .d-sm-none" These are invalid classes and should be class="d-block d-sm-none" without the period in the name