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.10.4

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>
<!-- Add chart.js reference if chart components are used in your application. -->
<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 chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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

builder.Services.AddBlazorBootstrap(); // Add this line

@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.

wwwroot/css/bootstrap
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.

Visual studio project templates#

Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!

dotnet new install Blazor.Bootstrap.Templates::1.9.1

Check the Visual Studio project templates GitHub repo here.

Blazor Bootstrap - Visual Studio project templates

TIP

Upgrade the Blazor.Bootstrap NuGet package to the latest available version.