HAVIT Blazor Bootstrap

Free Bootstrap 5.3 components for ASP.NET Blazor.

Getting started #

Prerequisites #

Havit.Blazor components have the following requirements:

.NET 6.0 or newer (net8.0, net7.0 and net6.0 multitargeting; net5.0 support dropped in v3.2)
Blazor WebAssembly (preferred) or Blazor Server hosting models (other options at your own risk)

Installation #

Try our enterprise project template which includes layered architecture, EF Core, gRPC code-first, ...

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

[ALTERNATIVE] 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.css" rel="stylesheet" />

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

If you're utilizing a standard Blazor template, it's important to clean up your CSS files. Specifically, you should remove any unnecessary code from site.css and completely delete the bootstrap.min.css reference from either App.razor, index.html or _Host.cshtml/_Layout.cshtml.

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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

[ALTERNATIVE] If your Blazor app is hosted using an ASP.NET Core Razor Page (for example, using _Host.cshtml/_Layout.cshtml), take advantage of our helper method. This method automatically emits the <script /> tag and handles versioning for you:

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

3. Import namespaces #

Add 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 services registration, typically found in the Program.cs file of your Blazor client project:

builder.Services.AddHxServices();

For projects that originated from earlier Blazor templates, these service registrations may be found in the Startup.cs file, specifically within the ConfigureServices() method. Note that in this case, you will not 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" />

This entire documentation is created using the Havit.Blazor library and operates as a Blazor WebAssembly ASP.NET Core Hosted project with server-side prerendering. You can view the source code of this documentation on GitHub.