HAVIT Blazor Bootstrap

Free Bootstrap 5.3 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 8.0 or newer (net9.0 and net8.0 multitargeting)
  • Most components require interactive rendering mode to work fully (limited functionality for static SSR where applicable)

Installation #

1. NuGet package #

To incorporate the Havit.Blazor.Components.Web.Bootstrap package into your project, you can use the NuGet Package Manager or execute the following command:

dotnet add package Havit.Blazor.Components.Web.Bootstrap

This package should be added to the project where the components will be utilized, typically in the user interface layer. For instance, in Visual Studio Blazor templates, this would be YourApp.Client.

2. CSS & JavaScript references #

To ensure proper styling and functionality, add references to CSS and JavaScript in your project.

CSS #

Insert the following line into the <head> section of your HTML file. The specific file to modify depends on your project's configuration. This could be App.razor, index.html, or _Host.cshtml/_Layout.cshtml:

<!-- Standard Bootstrap CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 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" />
Havit.Blazor Bootstrap theme #

If you prefer to utilize our custom Bootstrap theme, which is used in this documentation and our demos, substitute the first link with the following:

<!-- Custom themed Bootstrap CSS build -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.min.css" rel="stylesheet" />

Similarly, you can reference your custom Bootstrap build or any other Bootstrap theme in the same manner.

Bootstrap JavaScript #

In the same HTML file, add the following line at the end of the <body> section. This includes the Bootstrap JavaScript Bundle with Popper:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Generated CSS/JS references #

If your Blazor app is hosted using an ASP.NET Core, take advantage of our HxSetup helper methods instead. These methods automatically emit the <link /> and <script /> tags and handle versioning for you.

For Blazor Web App (.NET 8 and above), put the following in App.razor.

<head>
	...

	<!-- Bootstrap CSS (you can set the Bootstrap flavor with a parameter) -->
	@((MarkupString)HxSetup.RenderBootstrapCssReference())

	<!-- 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" />

	...
</head>
<body>
	...

	<!-- JavaScript Bundle with Popper -->
	@((MarkupString)HxSetup.RenderBootstrapJavaScriptReference())
</body>

For Razor Page (.NET 7 and below), put the following into _Host.cshtml or _Layout.cshtml.

<head>
	...

	<!-- Bootstrap CSS (you can set the Bootstrap flavor with a parameter) -->
	@Html.Raw(HxSetup.RenderBootstrapCssReference())

	<!-- 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" />

	...
</head>
<body>
	...

	<!-- JavaScript Bundle with Popper -->
	@Html.Raw(HxSetup.RenderBootstrapJavaScriptReference())
</body>

3. Import namespaces #

Add the following code to your _Imports.razor file:

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

4. Register Services #

Add the following line of code to your service registrations: 

builder.Services.AddHxServices();

These services need to be registered in all projects running the components, typically in the Program.cs file of your Blazor client project and also in the Program.cs file of your server project if you're using server rendering (`InteractiveServer`, `InteractiveAuto`, static server rendering, or pre-rendering).

For projects created from earlier Blazor templates, these service registrations may be found in the Startup.cs file, within the ConfigureServices() method. In this case, you won’t use the builder; instead, register the services directly to the services collection.

5. Specific components support #

[OPTIONAL] Some components require a specific project setup to function correctly. This typically involves registering a service and adding a host component to App.razor or a MainLayout.razor component.

For detailed instructions, please refer to the documentation of the respective components:

  • HxMessenger - Facilitates the display of new toast messages from your code with ease.
  • HxMessageBoxHost - Enables opening message boxes (and awaiting results) directly from your code.

Ready, set, go! #

You are now all set to utilize the full range of components in your Razor files. These components are prefixed with Hx. Rely on IntelliSense to guide you through their usage.

<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />
An unhandled error has occurred. Reload 🗙