Free Bootstrap 5.3 components for ASP.NET Blazor.
Havit.Blazor components have the following requirements:
net6.0
and net7.0
multitargeting; net5.0
support dropped in v3.2)Find the Havit.Blazor.Components.Web.Bootstrap package through NuGet Package Manager or install it with following command:
dotnet add package Havit.Blazor.Components.Web.Bootstrap
Add CSS & JavaScript references.
Add the following to your HTML <head>
section, it's either index.html
or _Host.cshtml
/_Layout.cshtml
depending on whether you're running WebAssembly or Server:
<!-- Standard Bootstrap CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Default values for additional CSS Variables (+ import Bootstrap Icons) -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/defaults.css" rel="stylesheet" />
<!-- Blazor CSS Isolation -->
<link href="Your.Blazor.Project.Assembly.Name.styles.css" rel="stylesheet" />
If you want to use our custom Bootstrap theme (used in this documentation and demos), replace the first link
with:
<!-- Custom themed Bootstrap CSS build -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.css" rel="stylesheet" />
You can reference your own or any other Bootstrap build/theme in a same way.
site.css
and remove the bootstrap.min.css
completely from either index.html
or _Host.cshtml
/_Layout.cshtml
.
At the end of HTML <body>
section of either index.html
add this (Bootstrap JavaScript Bundle with Popper):
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
It you are hosting you Blazor app in ASP.NET Core server-generated HTML file (e.g. _Host.cshtml
/_Layout.cshtml
), you can use our helper-method to emit the <script />
tag and automate versioning:
<!-- JavaScript Bundle with Popper -->
@Html.Raw(HxSetup.RenderBootstrapJavaScriptReference())
Add following to your _Imports.razor
file:
@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap
For Blazor WebAssembly add the following to your Program.Main
:
using Havit.Blazor.Components.Web; // <------ ADD THIS LINE
using Havit.Blazor.Components.Web.Bootstrap; // <------ ADD THIS LINE
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
// ... shortened for brevity
builder.Services.AddHxServices(); // <------ ADD THIS LINE
await builder.Build().RunAsync();
}
For Blazor Server (or WASM with server pre-rendering) add those registrations to your Startup.cs
file, ConfigureServices()
method.
(You won't use the builder
there, register the services to the services
collection.)
[OPTIONAL] Some of the components need a specific project setup to work. This usually includes registering a service and adding a host-component to App.razor
or layout component.
For instructions see documentation of those components:
Now you are ready to use all the components in your razor files. They come with Hx
prefix. IntelliSense will be your friend...
<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />