How to add Bootstrap to a Blazor application

When you create a Blazor server application, Bootstrap is installed in the css folder. However, this is usually an out of date version, and does not include the javascript bundle which is necessary for some components including tabs. 
  1. Rename the "bootstrap" folder to "bootstrap-original".
  2. Right click the css folder, and select Add, then Client-Side Library.
  3. Select "jsdelivr" as the Provider.
  4. Type "bootstrap@" in the Library field, then select the version you want.
  5. Select Choose specific files.
  6. Select these files
dist/css/bootstrap.min.css
dist/js/bootstrap.bundle.js
  1. Click the Install button.
  2. Open _Host.cshtml
  3. Add the following to the <head> element:
<link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css" />
  1. Then add the following at the end of the body:
<script src="~/css/bootstrap/dist/js/bootstrap.bundle.js"></script>
To uninstall the files, simply open up libman.json, hover over the files property and you'll see a lightbulb show up.  Select Uninstall bootstrap@5.3.1.

Comments

Post a Comment

Popular posts from this blog

How do I download a file from Azure Blob Storage to a .NET application?

This technique should work for any .NET Core application. Add the following Nuget packages: Azure.Identity Azure.Storage.Blobs Add a file to your project called BlobService.cs and paste the contents of this file . Next, instantiate and authenticate to your container. In this example, I am using the Connection String method. I have logged into the Azure Portal, and copied the connection string from the Access Keys page of the Storage Account. Click here for more information about Access Keys. Note: For production scenarios, you will want to register your application and use a client id/secret to authenticate. See here for details. string BlobConnectionString =     "DefaultEndpointsProtocol=https;AccountName=StevesStorageAccount;AccountKey=REDACTED==;EndpointSuffix=core.windows.net"; Emrick.CStringBlobService blobService =     new Emrick.CStringBlobService(BlobConnectionString, "file-uploads") Note that the constructor takes both the connection stri...
Read more