HAVIT Blazor Library

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 5.0 or newer (net5.0 and net6.0 multitargeting)
  • Blazor WebAssembly or Blazor Server hosting model (other options not tested yet)

Installation

1. Install the 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. 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.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 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 Bundle with Popper

At the end of HTML <body> section of either index.html or _Host.cshtml/_Layout.cshtml add this:

<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

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

[OPTIONAL] 5. Add support for specific components

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 🗙