Bootstrap5.css not working directly from nuget package

[Robert Sappert-Ernst]

I have installed: "syncfusion.blazor.layouts", "syncfusion.blazor.themes" I am attempting to get an example from "Getting Started with Blazor Dashboard Layout Component" working." I have created a new project and followed all the steps. The CSS from "Themes" cannot be loaded. When I directly copy Bootstrap5 to CSS, then it works. But the reference via "_solution" does not load the CSS. Here is the part in the Index.html:

From my index.html

<!--This works after copying bootstrap5.css from the nuget package-->

<link rel='nofollow' href="css/bootstrap/bootstrap5.css" rel="stylesheet" />

<!--this doesn't work-->

<!-- From: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started-->

 <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

Thanks for the help!

[Sivakumar ShunmugaSundaram]

Hi Robert,

Greetings from Syncfusion support.

From the shared details, you are using "syncfusion.blazor.themes" NuGet in your Blazor application and facing theme issues with the Blazor Dashboard Layout component. On further validation, the reported theme issue occurs because you are referring to an incorrect reference in the style tag.

To resolve the issue, we suggest you use the below reference in your application style tag.

Refer to the below code snippet.

[index.html],

 

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Documentation: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started#add-stylesheet-and-script-resources

Sample: Attached as zip file.

Check the attached sample and get back to us if you need any further assistance.

Attachment: BlazorApp_1cfeb6e9.zip