1. Installation
Search and installBootstrapBlazor, BootstrapBlazor.FontAwesome via NuGet
BootstrapBlazor
BootstrapBlazor.FontAwesome
2. Style
Maui Blazor
Edit wwwroot/index.html
Blazor Server
Modify Pages/_Host.cshtml
1. Remove link
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
2. Quote icon
<head>
...
<!-- BootstrapBlazor -->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet" />
<link href="MauiApp2.styles.css" rel="stylesheet" />
</head>
3. Quote Js
<body>
...
<!-- Javascript -->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>
4. Operation examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>MauiApp1</title>
<base href="/" />
<!-- BootstrapBlazor -->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet" />
<link href="MauiApp1.styles.css" rel="stylesheet" />
</head>
<body>
<!-- Javascript -->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
<div class="status-bar-safe-area"></div>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>
</body>
</html>
3. Registration
1. Registration
builder.Services.AddBootstrapBlazor();
2. Example
Maui Blazor
Modify MauiProgram.cs
using MauiApp1.Data;
using Microsoft.Extensions.Logging;
namespaceMauiApp1
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
builder.Services.AddMauiBlazorWebView();
// BootstrapBlazor
builder.Services.AddBootstrapBlazor();
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
builder.Logging.AddDebug();
#endif
builder.Services.AddSingleton<WeatherForecastService>();
return builder.Build();
}
}
}
Blazor Server
Modify Program.cs
using MauiApp2.Web.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddBootstrapBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
4. Namespace
1. Quote
@using BootstrapBlazor.Components
2. Example
_Imports.razor
@using System.Net.Http @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @usingMauiApp1 @usingMauiApp1.Shared @using BootstrapBlazor.Components
5. Root component
1. Example
Maui Blazor
Main.razor
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<PageTitle>Title</PageTitle>
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p>Under development...</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>
Blazor Server
App.razor
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>
6. Usage examples
