HAVIT Blazor Bootstrap

Free Bootstrap 5 components for ASP.NET Blazor.

GitHub Repository nuget version GitHub Release Notes nuget downloads GitHub GitHub Build Status
#StandWithUkraine: Russian warship, go f#ck yourself

Getting started #

Prerequisites #

Havit.Blazor components have the following requirements:

  • .NET 6.0 or newer (net6.0 and net7.0 multitargeting; net5.0 support dropped in v3.2)
  • Blazor WebAssembly or Blazor Server hosting model (other options not tested yet)

Installation #

1. NuGet package #

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

2. CSS & JavaScript #

Add CSS & JavaScript references.

CSS #

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.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 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.

Bootstrap JavaScript #

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.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 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())

3. Import namespaces #

Add following to your _Imports.razor file:

@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap

4. Register services #

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.)

5. Specific components support #

[OPTIONAL] Some of the components need a specific project setup to work. This usually includes adding registering a service and adding a host-component to App.razor or layout component.

For instructions see documentation of those components:

  • HxMessenger - displaying new toast-messages from your code easily
  • HxMessageBoxHost - opening message-boxes (and await results) from your code

Ready, set, go! #

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" />
An unhandled error has occurred. Reload 🗙