CODEWITHSUNDEEP
bootstrap-5blazor-webassembly
Emil
Emil

Reputation: 6903

Bootstrap 5 Nuget reference doesnt work in Blazor Webassembly

I am trying to use bootstrap from Nuget packages in a Blazor webassembly application. It looks very straight forward as explained here But it doesnt seem to be working.

I have tried referencing every possible way.

  <link href="~/css/bootstrap.css" rel="stylesheet" />

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

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

Nuget basically adds linked files under css folder. so it should be working but somehow not loading. any idea?

enter image description here

Upvotes: 4

Views: 3032

Answers (2)

AntimatterHedgehog
AntimatterHedgehog

Reputation: 193

The link to the answer on SO didn't work for me either, so I ended up adding a task that copies the css from the nuget folder into my project every time I build the project. A bit ugly perhaps compared to referencing the files directly, but it works :)

So in your csproj file first we need to generate a path property which is done by modifying the package reference like so:

<PackageReference Include="bootstrap" Version="5.2.3">
    <GeneratePathProperty>true</GeneratePathProperty>
</PackageReference>

This step generates a path variable that we can use in a build task. Note that the name of the path becomes Pkgbootstrap. We then add a Target node to the csproj file that uses this path variable:

<Target Name="CopyBootstrapFiles" BeforeTargets="PreBuildEvent">
    <Exec Command="cp $(Pkgbootstrap)/contentFiles/any/any/wwwroot/css/bootstrap.min.css  $(ProjectDir)/wwwroot/css/bootstrap" />
    <Exec Command="cp $(Pkgbootstrap)/contentFiles/any/any/wwwroot/css/bootstrap.min.css.map  $(ProjectDir)/wwwroot/css/bootstrap" />
</Target>

If you need other files from the bootstrap package (or any other package for that matter) you can just extend this in the same way. Note that since I'm on Linux the copy command does not work for me if I use \ in my path. I'm not sure if this will work on Windows, but I'm sure you can fix that on your own if it does not!

Upvotes: 0

Marco
Marco

Reputation: 23935

I've created a new Blazor web assembly project running .Net 6 and bootstrap is included out of the box.

You can install it via NuGet of course to get a specific version. The actual reference is happening in wwwroot/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>bootstraptest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <!-- anything elese -->
</head>

Upvotes: 0

Related Questions