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="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" 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="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" 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>
TIP
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.