Havit.Blazor components have the following requirements:
net8.0
and net9.0
to utilize the latest features).Select your setup to get customized instructions.
Framework version
Blazor app model
Interactive render mode
Did you opt for sample pages when creating the project?
Add Havit.Blazor.Components.Web.Bootstrap NuGet package
to your {YourBlazorApp}.Client
project.
You can use the NuGet Package Manager
or execute the following command:
dotnet add package Havit.Blazor.Components.Web.Bootstrap
Our library only requires the presence of any Bootstrap CSS bundle (version 5.3.3) in your project.
All additional CSS rules needed for our components are automatically included in the bundle of scoped CSS.
Ensure that the link to {YourBlazorApp}.styles.css
remains in your App.razor
and has NOT been removed.
Choose a Bootstrap CSS bundle
Add the following line to the <head>
section of your App.razor
file:
<link href="@Assets["_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.min.css"]" rel="stylesheet" />
This snippet adds a <link>
to our customized Bootstrap CSS build, incorporating the Havit.Blazor theme.
It includes various subtle adjustments, such as colors, borders, and other styling tweaks to enhance the appearance of your app.
This is the same theme used throughout our documentation to showcase components.
Our library only requires the inclusion of the appropriate Bootstrap JavaScript bundle (version 5.3.3) in your project.
Any additional JavaScript needed for our components (small JS modules supporting the integration of individual components with Blazor) is automatically loaded as needed.
Add the following line at the end of the <body>
section of your App.razor
file.
@((MarkupString)@HxSetup.RenderBootstrapJavaScriptReference())
This snippet adds a <script>
tag referencing Bootstrap JavaScript with Popper
that always matches the version required by Havit.Blazor,
so you wonโt need to maintain the link manually in the future.
Add the following code to both {YourBlazorProject}/Components/_Imports.razor
and {YourBlazorProject}.Client/_Imports.razor
files:
@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap
This code imports the namespaces of the Havit.Blazor library so you can use the components in your Razor files
without having to add @using
directive to each file or specify the full namespace each time.
Add the following code to service registrations in both {YourBlazorProject}/Program.cs
and {YourBlazorProject}.Client/Program.cs
files:
builder.Services.AddHxServices();
You will need to add the following using directive to the top of the file:
using Havit.Blazor.Components.Web;
[OPTIONAL] Some components require a specific project setup to function correctly.
This typically involves registering a service and adding a host component to a MainLayout.razor
component.
For detailed instructions, please refer to the documentation of the respective components:
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" />