1. Home
  2. Forum
  3. Blazor
  4. Bootstrap styles not being applied after upgrade to .net6

Bootstrap styles not being applied after upgrade to .net6

In a Blazor WASM app, I had some buttons that were being styled perfectly.  However, after I upgraded to .net6, they are now appearing as plain text.  Here is my index.html:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Oracle WCON</title>
    <base rel='nofollow' href="/" />
    <link rel='nofollow' href="css/app.css" rel="stylesheet" />
    <link rel='nofollow' href="OracleWCON.Client.styles.css" rel="stylesheet" />
    <link rel='nofollow' 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>
</head>

When I inspect the page when it is rendered, in the sources tab it shows as bootstrap4:


Thanks in advance


2 Replies
PE Peter March 21, 2022 11:38 AM UTC

So this just got worse. On Friday I only had issues with the buttons, but I just started up my PC to do some more work on this and all styling/scripting has now gone. The _content/Themes folder is missing when I inspect the rendered page. I have tried uninstalling the Themes nuget package and re-installing, made no difference. 

Clearly this is something I am doing wrong as I can create a new project using .Net6 and the formatting is fine.

 Any help greatly appreciated.


JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team March 23, 2022 04:24 AM UTC

Hi Peter, 
 
Greetings from Syncfusion. 
 
We have validated the reported issue “bootstrap styles not applied after upgrading to NET6” but Unfortunately, we are unable to replicate the issue at our end We have prepared the NET5 sample Upgraded to NET6 and run the sample, the sample runs successfully and components are rendered properly, and styles are also applied without any issues. We have followed the below steps  
  1. Prepared NET5 Blazor WebAssembly sample following our documentation.
  2. Run the sample, it runs successfully.
  3. For Upgrading to NET6, first changes the Targetframework to net6.0
<PropertyGroup> 
    <TargetFramework>net6.0</TargetFramework> 
</PropertyGroup> 
  1. Upgrade the Microsoft packages to support NET6 framework
 
  1. Add HeadOutlet in program.cs file
public class Program 
{ 
   public static async Task Main(string[] args) 
   { 
       var builder = WebAssemblyHostBuilder.CreateDefault(args); 
       builder.RootComponents.Add<App>("#app"); 
       builder.RootComponents.Add<HeadOutlet>("head::after"); 
       ..... 
    } 
} 
  1. Delete bin,obj folders and run the sample. Sample runs successfully and styles are also applied to components.
 
Output Image: 
 
 
 
Kindly try with the above information and sample and get back to us if you have any queries. 
 
Regards, 
Joshna L 


Loader.
Up arrow icon