Server-Side Blazor Installation Tutorial
Environmental preparation
Make sure the system is installed
visual studio 2019
orvisual studio 2022
net5
ornet6
BootstrapBlazor
Currently supported net5/net6
Create a project using the BootstrapBlazor Project Template extension
you can pass [portal] After downloading and installing the extension, create a project through the extension
Create a project with Visual Studio 1
Step 1. Create a project


Step 2. Add the BootstrapBlazor component to the existing project
BootstrapBlazor
dotnet add package BootstrapBlazor --version 7.4.4-beta01


~/Pages/_Host.cshtml
.NET5~/Pages/_Layout.cshtml
.NET6
<head>
...
<!-- Need to reference BootstrapBlazor.FontAwesome package !-->
<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/site.css" rel="stylesheet">
<link href="BlazorApp1.styles.css" rel="stylesheet">
</head>
~/Pages/_Host.cshtml
.NET5~/Pages/_Layout.cshtml
.NET6
<body>
...
<!-- add code !-->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
...
<script src="_framework/blazor.server.js"></script>
</body>
Starup.cs
.NET5Program.cs
.NET6
namespace MyBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddServerSideBlazor();
// Add this line of code
services.AddBootstrapBlazor();
}
}
}
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddServerSideBlazor();
// Add this line of code
builder.Services.AddBootstrapBlazor();
var app = builder.Build();
//more code may be present here
~/_Imports.razor
file so that Razor
Components are recognized in the file@using BootstrapBlazor.Components
BootstrapBlazorRoot
component to ~/App.razor
in file<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>
Step 3. Use components in the page
BootstrapBlazor
component and run it in the browser. E.g:Button
button<Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="test" />
