Getting started - Blazor WebAssembly

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.

Install Nuget Package#

Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.
Install-Package Blazor.Bootstrap -Version 1.8.0

Add CSS references#

Add the following references to the head section in the wwwroot/index.html.
<link href="" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
NOTE: If you use the Blazor WebAssembly App Empty template (without demonstration code and Bootstrap), add the following references to the head section in the wwwroot/index.html. There is a known GitHub issue Blazor empty template doesn't load scoped CSS.
<link href="_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css" rel="stylesheet" />

Add script references#

Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webassembly.js reference.
<script src="" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Add chart.js reference if Chart components are used in the application. -->
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
chart.js reference is optional. Add when the Chart components are used in the application.

Register services#

Add Blazor Bootstrap service in the Program.cs
using BlazorBootstrap; // Add this line

builder.Services.AddBlazorBootstrap(); // Add this line
Register tag helpers in _Imports.razor
@using BlazorBootstrap;

Remove default references#

In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed.

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

Delete the default bootstrap and open-iconic folders from the wwwroot folder.

  1. wwwroot/css/bootstrap
  2. wwwroot/css/open-iconic

Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used.