Client Side
Component reference
There are many ways to reference components, please refer to Installation
.NET CLI
dotnet add package BootstrapBlazor --version 5.11.2-beta06CSS file
Add the Bootstrap CSS file in the form of <link> tags to the wwwroot/index.html file <head> tags, and place them in all Before other style sheets.
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">JS file
Many components provided by Bootstrap rely on JavaScript to run. Specifically, these components rely on jQuery, Popper.js, and our own JavaScript plug-ins. Put the following <script> tag at the end of the wwwroot/index.html file and before the </body> tag, it will work.
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>Add the namespace to the _Imports.razor file
@using BootstrapBlazor.ComponentsRegistration Service
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// Add this line of code
builder.Services.AddBootstrapBlazor();
await builder.Build().RunAsync();
}
}Use components
Reference the BootstrapBlazor component in the razor component
<Button Color='Color.Primary'>Button</Button>