Skip to main content

Getting started - MAUI Blazor Hybrid App (.NET 8)

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

Install Nuget Package​

Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.

Install-Package Blazor.Bootstrap -Version 3.2.0

Add CSS references​

After the <base href="/" /> tag in the head section in the wwwroot/index.html file, add the following references:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />

Add script references​

Insert the following references into the body section of the wwwroot/index.html file, immediately after the _framework/blazor.webview.js reference:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 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>
<!-- Add sortable.js reference if SortableList component is used in your application. -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></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 MauiProgram.cs

builder.Services.AddBlazorBootstrap();

Register tag helpers in _Imports.razor

@using BlazorBootstrap;

Remove default references​

The default Blazor template includes demonstration code, icons, and Bootstrap. To remove these components, follow these steps:

  1. Delete the bootstrap folder from the wwwroot directory:

    • Delete the wwwroot/css/bootstrap folder.

  2. Remove the following line from wwwroot/index.html file:

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

Starter template​

GitHub Repo: Blazor Bootstrap - MAUI Blazor Hybrid App (.NET 8)

Blazor Bootstrap - MAUI Blazor Hybrid App

Sample Code​

TODO